Fix modal search images, other small edits

frontend-park-mail-ru · Dec 15, 2024 · 3861c67 · 3861c67
1 parent 8cc67bd
commit 3861c67
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 5 deletions.
diff --git a/public/assets/images/background-image.jpg b/public/assets/images/background-image.jpg
diff --git a/public/assets/images/background-image.webp b/public/assets/images/background-image.webp
diff --git a/public/components/GridMoviesList/GridMoviesList.hbs b/public/components/GridMoviesList/GridMoviesList.hbs
@@ -13,7 +13,7 @@
       {{#each items}}
         <div id='grid-find-id-{{this.id}}' class='grid-list__container_item'>
           <img
-            src='{{this.albumImage}}'
+            src='{{this.verticalImage}}'
             alt='{{title}}'
             class='grid-list__container_item_image'
           />

diff --git a/public/components/GridMoviesList/GridMoviesList.scss b/public/components/GridMoviesList/GridMoviesList.scss
@@ -26,6 +26,7 @@
       transition: transform 0.15s ease;
 
       &:hover {
+        cursor: pointer;
         transform: scale(1.02);
       }
 

diff --git a/public/components/GridMoviesList/GridMoviesList.ts b/public/components/GridMoviesList/GridMoviesList.ts
@@ -22,8 +22,14 @@ export class GridMoviesList {
     const gridContainer = document.getElementById(
       'create-room-modal-find-list',
     ) as HTMLElement;
+    const updatedItems = items.map((item) => {
+      return {
+        ...item,
+        verticalImage: item.albumImage.replace('poster', 'album'),
+      };
+    });
     gridContainer.innerHTML = template({
-      items,
+      items: updatedItems,
       isEmpty,
     });
     this.handleItemClick();

diff --git a/public/index.scss b/public/index.scss
@@ -74,7 +74,7 @@ body {
   }
 
   &-image {
-    background-image: url('./assets/images/background-image.jpg');
+    background-image: url('./assets/images/background-image.webp');
     background-size: cover;
     background-position: center;
   }

diff --git a/public/modules/IsMobileDevice.ts b/public/modules/IsMobileDevice.ts
@@ -1,4 +1,4 @@
-import { DEVICES_LIST } from 'consts';
+import { DEVICES_LIST } from '../consts';
 
 export const isMobileDevice = () => {
   return window.matchMedia('only screen and (max-width: 750px)').matches;

diff --git a/public/modules/Serializer.ts b/public/modules/Serializer.ts
@@ -8,6 +8,7 @@ export const serializeMovie = (movie: any) => {
     title: movie.title,
     albumImage: HOST + movie.album_url,
     cardImage: HOST + movie.card_url,
+    verticalImage: HOST + movie.ver_url,
     country: movie.country,
     description: movie.description,
     movieType: movie.movie_type,
@@ -123,7 +124,7 @@ export const serializeUserData = (user: any) => {
     birthdate: user.birthdate,
     sex: user.sex,
     avatar: HOST + user.avatar_url,
-    isPremium: true,
+    isPremium: user.subscription_status,
     expirationDate: user.subscription_expiration_date,
   };
 };

diff --git a/public/types/movie.ts b/public/types/movie.ts
@@ -6,6 +6,7 @@ export type Movie = {
   description: string;
   cardImage: string;
   albumImage: string;
+  verticalImage?: string;
   rating: number;
   releaseDate: string;
   movieType: string;