diff --git a/frontend/src/app/game-menu/game-menu.component.html b/frontend/src/app/game-menu/game-menu.component.html index 28c53221c1e72660c91a87b2742cf1c49aa46e39..5b53232a30821693e73944badb809bb30eac2dd7 100644 --- a/frontend/src/app/game-menu/game-menu.component.html +++ b/frontend/src/app/game-menu/game-menu.component.html @@ -3,5 +3,6 @@ <li><button id="importQuestions">Questions</button></li> <input type="file" id="jsonSelector" (change)="onJSONSelected($event)" accept=".json" style="display: none;"> <li id="startButton"><button>Start</button></li> + <li id="acceptButton" style="display: none;"><button>Accept</button></li> </ul> </div> diff --git a/frontend/src/app/interview-pane/interview-pane.component.css b/frontend/src/app/interview-pane/interview-pane.component.css index f64ca91695044e469caa3a7570d8f4815e88e38e..1ac047aeed4ecae272fb44a5761e8d1f778dea6a 100644 --- a/frontend/src/app/interview-pane/interview-pane.component.css +++ b/frontend/src/app/interview-pane/interview-pane.component.css @@ -15,7 +15,7 @@ body { } .mic:active { - animation: bounce 0.5s; + animation: bounce 0.2s; } .mic::before, .mic::after { @@ -154,6 +154,7 @@ body { max-width: 400px; max-height: auto; border-radius: 25px; + object-fit: cover; } .text-container { @@ -168,5 +169,4 @@ body { max-width: 600px; margin-left: auto; margin-right: auto; - } - \ No newline at end of file +} \ No newline at end of file diff --git a/frontend/src/app/interview-pane/interview-pane.component.html b/frontend/src/app/interview-pane/interview-pane.component.html index af3f70a6c8430ca952249c697d579375982c165b..088612631369f0662133c17faf159a8688792bdc 100644 --- a/frontend/src/app/interview-pane/interview-pane.component.html +++ b/frontend/src/app/interview-pane/interview-pane.component.html @@ -1,8 +1,11 @@ <div class="interview-pane"> <div class="background-image-container"> - <video muted class="fixed-size-video" id="backgroundVideo"> + <video muted class="fixed-size-video" id="backgroundVideo1"> <source src="assets/hinata/bienvenue.mp4" type="video/mp4"> </video> + <video muted class="fixed-size-video" id="backgroundVideo2" style="display: none;"> + <source src="assets/hinata/long_pause.mp4" type="video/mp4"> + </video> <div id="textContainer" class="text-container"></div> diff --git a/frontend/src/app/interview-pane/interview-pane.component.ts b/frontend/src/app/interview-pane/interview-pane.component.ts index 0aa11e9d45601135074ad1d8abc1206ea61a25e2..91c26784efc16f1f13825c8257fade4b92c86895 100644 --- a/frontend/src/app/interview-pane/interview-pane.component.ts +++ b/frontend/src/app/interview-pane/interview-pane.component.ts @@ -9,6 +9,7 @@ import { SharedService } from '../shared.service'; export class InterviewPaneComponent implements OnInit, AfterViewInit { questionId: string = '1'; audioList: { id: string, urls: string[] }[] = []; + secondVideoSrc: string = 'assets/hinata/long_pause.mp4'; constructor(private sharedService: SharedService) { } @@ -23,6 +24,7 @@ export class InterviewPaneComponent implements OnInit, AfterViewInit { const micShadow = document.getElementById('micShadow'); const startButton = document.getElementById('startButton'); const importQuestions = document.getElementById('importQuestions'); + const acceptButton = document.getElementById('acceptButton'); if (mic && micShadow) { @@ -31,27 +33,40 @@ export class InterviewPaneComponent implements OnInit, AfterViewInit { }); } - if (startButton && importQuestions && mic) { + if (startButton && importQuestions && acceptButton) { startButton.addEventListener('click', () => { startButton.style.display = 'none'; importQuestions.style.display = 'none'; - mic.style.display = 'inline'; + acceptButton.style.display = 'inline'; - const video = document.getElementById('backgroundVideo') as HTMLVideoElement; + const video1 = document.getElementById('backgroundVideo1') as HTMLVideoElement; // Welcome message + const video2 = document.getElementById('backgroundVideo2') as HTMLVideoElement; // Break const textContainer = document.getElementById('textContainer'); - if (video) { - video.loop = true; - video.play(); + if (video1) { + video1.play(); + video1.addEventListener('ended', () => { + video2.style.display = 'inline'; + video1.style.display = 'none'; + video2.loop = true; + video2.play(); + }, { once: true }); document.body.addEventListener('click', () => { - video.muted = false; - video.play(); + video1.muted = false; + video1.play(); this.showText("Bonjour, enchantée de faire votre connaissance, je m'appelle Hinata et je suis là pour vous poser quelques questions si vous me le permettez.", textContainer!); }, { once: true }); } }); } + + if (acceptButton && mic) { + acceptButton.addEventListener('click', () => { + mic.style.display = 'inline'; + acceptButton.style.display = 'none'; + }); + } } showText(text: string, container: HTMLElement): void { diff --git a/frontend/src/assets/hinata/bienvenue.mp4 b/frontend/src/assets/hinata/bienvenue.mp4 index a7d5d43226d35718df59a9d97b8e5f7b0f510ec3..5871b8ce8d8a80acc4e3669760132bd5c41cd0a8 100644 Binary files a/frontend/src/assets/hinata/bienvenue.mp4 and b/frontend/src/assets/hinata/bienvenue.mp4 differ diff --git a/frontend/src/assets/hinata/long_pause.mp4 b/frontend/src/assets/hinata/long_pause.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..6078b3112a1ef5b8a5f72d010ca58cf99cd39b8f Binary files /dev/null and b/frontend/src/assets/hinata/long_pause.mp4 differ diff --git a/hinata/bienvenue.mp4 b/hinata/bienvenue.mp4 index a7d5d43226d35718df59a9d97b8e5f7b0f510ec3..5871b8ce8d8a80acc4e3669760132bd5c41cd0a8 100644 Binary files a/hinata/bienvenue.mp4 and b/hinata/bienvenue.mp4 differ diff --git a/hinata/long_pause.mp4 b/hinata/long_pause.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..6078b3112a1ef5b8a5f72d010ca58cf99cd39b8f Binary files /dev/null and b/hinata/long_pause.mp4 differ diff --git a/hinata/pause.mp4 b/hinata/pause.mp4 index c0b8481103d9886953accf6361a2d9da2e4172ea..b29e9a682b2f5a0f3860bbeeefcf6c4217bf947f 100644 Binary files a/hinata/pause.mp4 and b/hinata/pause.mp4 differ diff --git a/hinata/reverse_pause.mp4 b/hinata/reverse_pause.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..b6aa907ee6cf92b4eac0c47562d1c23cc7bdbc58 Binary files /dev/null and b/hinata/reverse_pause.mp4 differ