Update room modal

frontend-park-mail-ru · Dec 16, 2024 · bebd828 · bebd828
1 parent f473ce1
commit bebd828
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/public/components/CoWatchBlock/CoWatchBlock.ts b/public/components/CoWatchBlock/CoWatchBlock.ts
@@ -25,7 +25,10 @@ export class CoWatchBlock {
 
     if (createRoomButton) {
       createRoomButton.addEventListener('click', () => {
-        const modal = new CreateRoomModal();
+        const modal = new CreateRoomModal(
+          'Создание комнаты',
+          'Воспользуйтесь поиском, чтобы найти нужный фильм и создать комнату для совместного просмотра',
+        );
         modal.render();
       });
     }

diff --git a/public/components/CreateRoomModal/CreateRoomModal.hbs b/public/components/CreateRoomModal/CreateRoomModal.hbs
@@ -6,12 +6,10 @@
       src='/assets/icons/closeNoShadowIcon.svg'
       alt=''
     />
-    <h1 class='create-room-modal__content_title'>Создание комнаты</h1>
+    <h1 class='create-room-modal__content_title'>{{title}}</h1>
     <div class='create-room-modal__content_search'>
       <div class='create-room-modal__content_search_area'>
-        <span class='create-room-modal__content_search_desc'>Воспользуйтесь
-          поиском, чтобы найти нужный фильм и создать комнату для совместного
-          просмотра</span>
+        <span class='create-room-modal__content_search_desc'>{{text}}</span>
         <input
           autocomplete='off'
           id='create-room-search-movie-input'

diff --git a/public/components/CreateRoomModal/CreateRoomModal.ts b/public/components/CreateRoomModal/CreateRoomModal.ts
@@ -15,12 +15,16 @@ export class CreateRoomModal {
   #inputValueEmmitter: Emitter<string>;
   #isModalOpen: boolean;
   #onClick;
+  #title;
+  #text;
 
-  constructor(onClick?: (id: number) => void) {
+  constructor(title: string, text: string, onClick?: (id: number) => void) {
     this.#isModalOpen = false;
     this.#inputValue = '';
     this.#inputValueEmmitter = new Emitter<string>('');
     this.#onClick = onClick;
+    this.#title = title;
+    this.#text = text;
 
     const userLoadingListener = searchBlockStore.movEm$.addListener(() => {
       this.renderMoviesList(searchBlockStore.getMovies(), this.#inputValue);
@@ -88,7 +92,10 @@ export class CreateRoomModal {
   render() {
     const root = document.getElementById('root');
     if (root) {
-      root.insertAdjacentHTML('beforeend', template());
+      root.insertAdjacentHTML(
+        'beforeend',
+        template({ title: this.#title, text: this.#text }),
+      );
       root.style.overflow = 'hidden';
     }
 

diff --git a/public/pages/RoomPage/RoomPage.ts b/public/pages/RoomPage/RoomPage.ts
@@ -171,7 +171,11 @@ export class RoomPage {
   }
 
   handleChangeMovieClick() {
-    const modal = new CreateRoomModal((id: number) => Actions.changeMovie(id));
+    const modal = new CreateRoomModal(
+      'Изменение фильма',
+      'Воспользуйтесь поиском, чтобы найти нужный фильм',
+      (id: number) => Actions.changeMovie(id),
+    );
     const createRoomButton = document.getElementById(
       'change-movie-btn',
     ) as HTMLElement;

diff --git a/public/store/RoomPageStore.ts b/public/store/RoomPageStore.ts
@@ -190,7 +190,11 @@ class RoomPageStore {
             }
             break;
           case 'change_movie':
-            if (this.#room && messageData['movie'].id !== this.#room.movie.id) {
+            if (
+              this.#room &&
+              messageData['movie'] &&
+              messageData['movie'].id !== this.#room.movie.id
+            ) {
               this.#room.movie = serializeMovieDetailed(messageData['movie']);
               if (this.#room.movie.seasons && this.#room.movie.seasons.length) {
                 roomPage.renderVideo(