Merge pull request #9 from frontend-park-mail-ru/RK4

RK4 Additional features and fixex
frontend-park-mail-ru · Dec 16, 2024 · edbca4c · edbca4c
2 parents 8f0e835 + fd974f4
commit edbca4c
Show file tree

Hide file tree

Showing 23 changed files with 157 additions and 62 deletions.
diff --git a/public/assets/icons/logo-172-mask.png b/public/assets/icons/logo-172-mask.png
diff --git a/public/assets/icons/logo-172.png b/public/assets/icons/logo-172.png
diff --git a/public/assets/icons/logoIcon-144.svg b/public/assets/icons/logoIcon-144.svg
diff --git a/public/assets/icons/logoIcon-180.png b/public/assets/icons/logoIcon-180.png
diff --git a/public/assets/icons/logoIcon-180.svg b/public/assets/icons/logoIcon-180.svg
diff --git a/public/assets/icons/logoIcon-60.svg b/public/assets/icons/logoIcon-60.svg
diff --git a/public/assets/icons/sendMessageIcon.svg b/public/assets/icons/sendMessageIcon.svg
diff --git a/public/assets/screenshots/screen1.png b/public/assets/screenshots/screen1.png
diff --git a/public/assets/screenshots/screen2.png b/public/assets/screenshots/screen2.png
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/components/Slider/Slider.scss b/public/components/Slider/Slider.scss
@@ -12,7 +12,6 @@
   &__track {
     display: flex;
     height: auto;
-    align-items: center;
 
     gap: 50px;
     transition: transform 0.5s ease;

diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link rel="icon" type="image/svg" href="./assets/icons/logoIcon.svg"/>
         <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+        <link rel="manifest" href="./manifest.json" />
     </head>
     <body>
         <div id="root"></div>

diff --git a/public/index.ts b/public/index.ts
@@ -30,14 +30,5 @@ root.appendChild(footerElement);
 root.appendChild(notifierElement);
 root.appendChild(previewElement);
 
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker
-    .register('/sw.js', { scope: '/' })
-    .then(() => console.log('serviceWorker has been registered'))
-    .catch((err) => {
-      console.log('SW ERR: ', err);
-    });
-}
-
 initialStore.start();
 router.start();
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,37 @@
+{
+  "id": "/",
+  "lang": "ru-RU",
+  "short_name": "Cassette",
+  "name": "Cassette — онлайн кинотеатр с совместным просмотром",
+  "description": "Cassette — онлайн кинотеатр с совместным просмотром, широкой библиотекой фильмов и многофункциональным видео-плеером!",
+  "icons": [
+    {
+      "src": "/assets/icons/logo-172.png",
+      "sizes": "172x172"
+    },
+    {
+      "src": "/assets/icons/logo-172-mask.png",
+      "sizes": "172x172",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "background_color": "#000",
+  "display": "standalone",
+  "start_url": "/",
+  "theme_color": "#000",
+  "screenshots": [
+    {
+      "src": "/assets/screenshots/screen1.png",
+      "type": "image/png",
+      "sizes": "3024x1748",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/assets/screenshots/screen2.png",
+      "type": "image/png",
+      "sizes": "708x1538",
+      "form_factor": "narrow"
+    }
+  ]
+}
diff --git a/public/pages/MoviePage/MoviePage.ts b/public/pages/MoviePage/MoviePage.ts
@@ -210,15 +210,17 @@ export class MoviePage {
     season?: number,
     series?: number,
   ) {
-    if (timeCode > duration * 0.95 || timeCode < duration * 0.05) {
-      Actions.deleteLastMovie();
-      return;
-    }
+    if (duration) {
+      if (timeCode > duration * 0.95 || timeCode < duration * 0.05) {
+        Actions.deleteLastMovie();
+        return;
+      }
 
-    if (!this.#movie?.isSerial) {
-      Actions.setLastMovies(timeCode, duration);
-    } else {
-      Actions.setLastMovies(timeCode, duration, season, series);
+      if (!this.#movie?.isSerial) {
+        Actions.setLastMovies(timeCode, duration);
+      } else {
+        Actions.setLastMovies(timeCode, duration, season, series);
+      }
     }
   }
 

diff --git a/public/pages/RoomPage/RoomPage.hbs b/public/pages/RoomPage/RoomPage.hbs
@@ -47,6 +47,7 @@
             class='input room-page__chat_input'
             placeholder='Введите сообщение...'
             type='text'
+            autocomplete='off'
           />
           <img
             id='send-message-button'

diff --git a/public/pages/RoomPage/RoomPage.scss b/public/pages/RoomPage/RoomPage.scss
@@ -85,8 +85,8 @@
 
       &_button {
         cursor: pointer;
-        width: 36px;
-        height: 36px;
+        width: 37px;
+        height: 37px;
       }
 
       &_block {

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;
@@ -358,6 +362,25 @@ export class RoomPage {
         ) as HTMLButtonElement;
         sendMessageButton.addEventListener('click', () => this.sendMessage());
         this.handleChangeMovieClick();
+
+        const messageInput = document.getElementById(
+          'messages-input',
+        ) as HTMLInputElement;
+
+        const handleEnterKey = (event: KeyboardEvent) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            this.sendMessage();
+          }
+        };
+
+        messageInput.addEventListener('focus', () => {
+          messageInput.addEventListener('keydown', handleEnterKey);
+        });
+
+        messageInput.addEventListener('blur', () => {
+          messageInput.removeEventListener('keydown', handleEnterKey);
+        });
       } else {
         this.#loader.render();
       }

diff --git a/public/store/MoviePageStore.ts b/public/store/MoviePageStore.ts
@@ -184,6 +184,7 @@ class MoviePageStore {
           foundMovie.season = season;
           foundMovie.series = series;
           foundMovie.albumImage = seriesImage as string;
+          foundMovie.savingSeconds = Date.now();
         } else {
           this.#lastMovies.push({
             id: this.#movie.id,
@@ -313,35 +314,35 @@ class MoviePageStore {
         }
         break;
       case ActionTypes.SET_LAST_MOVIES:
-        if (userStore.getUser().username) {
-          // TODO: Расскомментировать после мержа
-          // this.setLastMoviesRequest({
-          //   ...action.payload,
-          //   id: this.#movie?.id,
-          //   title: this.#movie?.title,
-          //   albumImage: this.#movie?.albumImage,
-          //   savingSeconds: Date.now(),
-          // });
-        } else {
-          this.setLastMoviesToLocalStorage(
-            action.payload.timeCode,
-            action.payload.duration,
-            action.payload.season,
-            action.payload.series,
-          );
-        }
+        // if (userStore.getUser().username) {
+        // TODO: Расскомментировать после мержа
+        // this.setLastMoviesRequest({
+        //   ...action.payload,
+        //   id: this.#movie?.id,
+        //   title: this.#movie?.title,
+        //   albumImage: this.#movie?.albumImage,
+        //   savingSeconds: Date.now(),
+        // });
+        // } else {
+        this.setLastMoviesToLocalStorage(
+          action.payload.timeCode,
+          action.payload.duration,
+          action.payload.season,
+          action.payload.series,
+        );
+        // }
         break;
       case ActionTypes.COPY_LAST_MOVIES:
         // TODO: Расскомментировать после мержа
         // this.setLastMoviesRequest();
         break;
       case ActionTypes.DELETE_LAST_MOVIE:
-        if (userStore.getUser().username) {
-          // TODO: Расскомментировать после мержа
-          // this.deleteLastMovieRequest();
-        } else {
-          this.deleteLastMovieFromLocalStorage();
-        }
+        // if (userStore.getUser().username) {
+        // TODO: Расскомментировать после мержа
+        // this.deleteLastMovieRequest();
+        // } else {
+        this.deleteLastMovieFromLocalStorage();
+        // }
         break;
       case ActionTypes.RATE_MOVIE:
         this.rateMovieRequest(action.payload.rating);

diff --git a/public/store/RoomPageStore.ts b/public/store/RoomPageStore.ts
@@ -135,13 +135,13 @@ class RoomPageStore {
       this.#globalRoomId = '';
     }
 
-    ws.onclose = (event) => {
-      console.log('WebSocket соединение закрыто:', event.code, event.reason);
-    };
+    // ws.onclose = (event) => {
+    //   console.log('WebSocket соединение закрыто:', event.code, event.reason);
+    // };
 
-    ws.onopen = () => {
-      console.log('WebSocket соединение открыто');
-    };
+    // ws.onopen = () => {
+    //   console.log('WebSocket соединение открыто');
+    // };
 
     ws.onmessage = (event) => {
       const messageData = JSON.parse(event.data);
@@ -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(

diff --git a/public/store/UserStore.ts b/public/store/UserStore.ts
@@ -106,6 +106,7 @@ class UserStore {
     this.#user.username = '';
     this.#user.avatar = '';
     this.#user.id = 0;
+    this.#user.isPremium = false;
 
     this.#isUserLoading = false;
     this.#isUserLoadingEmmiter.set(false);