diff --git a/public/assets/images/cowatchBackground.png b/public/assets/images/cowatchBackground.png deleted file mode 100644 index 093d80a..0000000 Binary files a/public/assets/images/cowatchBackground.png and /dev/null differ diff --git a/public/assets/images/cowatchBackground.webp b/public/assets/images/cowatchBackground.webp new file mode 100644 index 0000000..76279c2 Binary files /dev/null and b/public/assets/images/cowatchBackground.webp differ diff --git a/public/assets/images/cowatchBackgroundMobile.png b/public/assets/images/cowatchBackgroundMobile.png deleted file mode 100644 index ec096f1..0000000 Binary files a/public/assets/images/cowatchBackgroundMobile.png and /dev/null differ diff --git a/public/assets/images/cowatchBackgroundMobile.webp b/public/assets/images/cowatchBackgroundMobile.webp new file mode 100644 index 0000000..c7e86e4 Binary files /dev/null and b/public/assets/images/cowatchBackgroundMobile.webp differ diff --git a/public/components/Card/Card.scss b/public/components/Card/Card.scss index 502efb1..09a16fb 100644 --- a/public/components/Card/Card.scss +++ b/public/components/Card/Card.scss @@ -83,6 +83,10 @@ .card { width: 140px; height: 188px; + + &:hover { + transform: none; + } } .card-skeleton { min-width: 140px; diff --git a/public/components/Card/Card.ts b/public/components/Card/Card.ts index b99a3a8..fb23fb6 100644 --- a/public/components/Card/Card.ts +++ b/public/components/Card/Card.ts @@ -6,6 +6,7 @@ import { CARD_PREVIEW_EXPANDING_TIMEOUT, CARD_PREVIEW_HIDING_TIMEOUT, } from '../../consts'; +import { isMobileDevice } from 'modules/IsMobileDevice'; export class Card { #parent; @@ -33,7 +34,7 @@ export class Card { const previewBlock = document.getElementById('preview') as HTMLElement; let timeoutId: any; - if (card) { + if (card && !isMobileDevice()) { card.addEventListener('mouseover', () => { timeoutId = setTimeout(() => { const coor = card.getBoundingClientRect(); diff --git a/public/components/CoWatchBlock/CoWatchBlock.hbs b/public/components/CoWatchBlock/CoWatchBlock.hbs index c8144ea..a86fc30 100644 --- a/public/components/CoWatchBlock/CoWatchBlock.hbs +++ b/public/components/CoWatchBlock/CoWatchBlock.hbs @@ -45,7 +45,7 @@ {{/if}} diff --git a/public/components/CoWatchBlock/CoWatchBlock.scss b/public/components/CoWatchBlock/CoWatchBlock.scss index 805913e..e3aac49 100644 --- a/public/components/CoWatchBlock/CoWatchBlock.scss +++ b/public/components/CoWatchBlock/CoWatchBlock.scss @@ -19,6 +19,7 @@ &__background { width: 100%; user-select: none; + height: 35vw; } &__container { position: absolute; @@ -110,7 +111,7 @@ } height: 420px; &__container { - background-image: url('assets/images/cowatchBackgroundMobile.png'); + background-image: url('assets/images/cowatchBackgroundMobile.webp'); background-size: cover; background-position: center; } diff --git a/public/components/CreateRoomModal/CreateRoomModal.hbs b/public/components/CreateRoomModal/CreateRoomModal.hbs index 803b800..c07779b 100644 --- a/public/components/CreateRoomModal/CreateRoomModal.hbs +++ b/public/components/CreateRoomModal/CreateRoomModal.hbs @@ -13,6 +13,7 @@ поиском, чтобы найти нужный фильм и создать комнату для совместного просмотра Оценки помогают сделать сервис лучше - + {{else}}
diff --git a/public/components/RateBlock/RateBlock.ts b/public/components/RateBlock/RateBlock.ts index 42b4e7a..e7209bf 100644 --- a/public/components/RateBlock/RateBlock.ts +++ b/public/components/RateBlock/RateBlock.ts @@ -42,20 +42,20 @@ export class RateBlock { '.rating-star', ) as NodeListOf; - if (this.#movie?.userRating === 0) { - stars.forEach((star, index) => { - star.addEventListener('click', () => { - Actions.rateMovie(index + 1); - this.render(); - }); + stars.forEach((star, index) => { + star.addEventListener('click', () => { + Actions.rateMovie(index + 1); + this.render(); + }); + if (this.#movie?.userRating === 0) { star.addEventListener('mouseenter', () => { this.highlightStars(index); }); star.addEventListener('mouseleave', () => { this.resetStars(); }); - }); - } + } + }); } highlightStars(index: number) { @@ -102,18 +102,19 @@ export class RateBlock { } } - deleteRating() { - const deleteRatingButton = document.getElementById( - 'rate-block-delete-rate-button', - ) as HTMLElement; + // не удалять + // deleteRating() { + // const deleteRatingButton = document.getElementById( + // 'rate-block-delete-rate-button', + // ) as HTMLElement; - if (deleteRatingButton) { - deleteRatingButton.addEventListener('click', () => { - Actions.deleteRating(); - this.render(); - }); - } - } + // if (deleteRatingButton) { + // deleteRatingButton.addEventListener('click', () => { + // Actions.deleteRating(); + // this.render(); + // }); + // } + // } renderTemplate() { this.#parent.innerHTML = template({ @@ -126,6 +127,6 @@ export class RateBlock { this.handleAuthClick(); this.coloringInitialRatingStars(); this.handleStarsHover(); - this.deleteRating(); + // this.deleteRating(); // не удалять } } diff --git a/public/components/RateModalBlock/RateModalBlock.hbs b/public/components/RateModalBlock/RateModalBlock.hbs index 09dab6d..0ce1fc1 100644 --- a/public/components/RateModalBlock/RateModalBlock.hbs +++ b/public/components/RateModalBlock/RateModalBlock.hbs @@ -30,13 +30,6 @@ id='modal-rate-block-rate-button' class='button rate-modal-block__content_add-rate' >Оценить - {{#if isUserVoted}} - - - {{/if}}
diff --git a/public/components/RateModalBlock/RateModalBlock.scss b/public/components/RateModalBlock/RateModalBlock.scss index aa71854..0bb0054 100644 --- a/public/components/RateModalBlock/RateModalBlock.scss +++ b/public/components/RateModalBlock/RateModalBlock.scss @@ -33,7 +33,7 @@ } &__content { - height: 320px; + height: 280px; max-height: 100vh; width: 100%; max-width: 1150px; diff --git a/public/components/RateModalBlock/RateModalBlock.ts b/public/components/RateModalBlock/RateModalBlock.ts index 606f6ec..6e3bf74 100644 --- a/public/components/RateModalBlock/RateModalBlock.ts +++ b/public/components/RateModalBlock/RateModalBlock.ts @@ -30,17 +30,18 @@ export class RateModalBlock { } } - handleDeleteRatingClick() { - const deleteRatingButton = document.getElementById( - 'modal-rate-block-remove-rate-button', - ); - if (deleteRatingButton) { - deleteRatingButton.addEventListener('click', () => { - Actions.deleteRating(); - this.hideModal(); - }); - } - } + // не удалять + // handleDeleteRatingClick() { + // const deleteRatingButton = document.getElementById( + // 'modal-rate-block-remove-rate-button', + // ); + // if (deleteRatingButton) { + // deleteRatingButton.addEventListener('click', () => { + // Actions.deleteRating(); + // this.hideModal(); + // }); + // } + // } hideModal() { const rateSheet = document.getElementById( @@ -113,6 +114,6 @@ export class RateModalBlock { this.handleRatingScrolling(); this.displayInitialRating(); this.handleRateClick(); - this.handleDeleteRatingClick(); + // this.handleDeleteRatingClick(); //не удалять } } diff --git a/public/index.ts b/public/index.ts index 30f4aef..835608e 100644 --- a/public/index.ts +++ b/public/index.ts @@ -30,15 +30,14 @@ root.appendChild(footerElement); root.appendChild(notifierElement); root.appendChild(previewElement); -// if ('serviceWorker' in navigator) { -// console.log('serviceWorker is supported'); -// navigator.serviceWorker -// .register('sw.js', { scope: '/' }) -// .then(() => console.log('serviceWorker has been registered')) -// .catch((err) => { -// console.log('SW ERR: ', err); -// }); -// } +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/modules/Serializer.ts b/public/modules/Serializer.ts index 3e1f512..0e948e3 100644 --- a/public/modules/Serializer.ts +++ b/public/modules/Serializer.ts @@ -65,7 +65,7 @@ export const serializeMovieDetailed = (movie: any) => { isFromFavorites: movie.is_favorite, withSubscription: !!movie.with_subscription, //For rating test - userRating: 7, + userRating: movie.rating_user, }; }; @@ -123,7 +123,7 @@ export const serializeUserData = (user: any) => { birthdate: user.birthdate, sex: user.sex, avatar: HOST + user.avatar_url, - isPremium: user.subscription_status, + isPremium: true, expirationDate: user.subscription_expiration_date, }; }; diff --git a/public/pages/ProfilePage/ProfilePage.hbs b/public/pages/ProfilePage/ProfilePage.hbs index bfbb0ed..592a932 100644 --- a/public/pages/ProfilePage/ProfilePage.hbs +++ b/public/pages/ProfilePage/ProfilePage.hbs @@ -22,7 +22,10 @@ Выбрать изображение + /> + {{! До 1мБ, png/jpg/jpeg }} + Выбрать изображение +
diff --git a/public/pages/ProfilePage/ProfilePage.scss b/public/pages/ProfilePage/ProfilePage.scss index bb9fdf1..f619367 100644 --- a/public/pages/ProfilePage/ProfilePage.scss +++ b/public/pages/ProfilePage/ProfilePage.scss @@ -90,12 +90,15 @@ display: none; &_label { + position: relative; + display: flex; align-items: center; gap: 8px; font-size: $font-size-medium; border: 1.5px solid $brand; - padding: 0.5em 1em; + padding: 0.5em 1em 1em 1em; + border-radius: 0.5em; transition: transform 0.2s ease; @@ -110,6 +113,15 @@ width: 24px; user-select: none; } + + &_sub { + color: $text-secondary-color; + font-size: 12px; + bottom: 2px; + font-weight: 300; + right: 20%; + position: absolute; + } } } } @@ -296,6 +308,11 @@ &_input { &_label { font-size: 14px; + + &_sub { + font-size: 10px; + right: 25%; + } } } } diff --git a/public/pages/ProfilePage/ProfilePage.ts b/public/pages/ProfilePage/ProfilePage.ts index adbf680..6db4b60 100644 --- a/public/pages/ProfilePage/ProfilePage.ts +++ b/public/pages/ProfilePage/ProfilePage.ts @@ -140,8 +140,6 @@ export class ProfilePage { this.#userAvatar = file; this.renderAvatar(avatarUrl); this.controlButtonDisable(); - const notifier = new Notifier('info', 'Изображение загружено', 3000); - notifier.render(); } } } diff --git a/public/store/MoviePageStore.ts b/public/store/MoviePageStore.ts index 15a032d..cfcdb45 100644 --- a/public/store/MoviePageStore.ts +++ b/public/store/MoviePageStore.ts @@ -14,6 +14,7 @@ import { } from 'modules/Deserializer'; import { userStore } from './UserStore'; import { ErrorPage } from 'pages/ErrorPage/ErrorPage'; +import { Notifier } from 'components/Notifier/Notifier'; import { UsersList } from 'components/UsersList/UsersList'; const moviePage = new MoviePage(); @@ -246,18 +247,38 @@ class MoviePageStore { } } - rateMovieRequest(rating: number) { - if (this.#movie?.userRating !== undefined) { - this.#movie.userRating = rating; + async rateMovieRequest(rating: number) { + const tmp = this.#movie?.userRating; + try { + if (this.#movie?.userRating !== undefined) { + this.#movie.userRating = rating; + } + await apiClient.post({ + path: `movies/${this.#movie?.id}/rating`, + body: { rating: rating }, + }); + if (this.#movie?.userRating !== undefined) { + this.#movie.userRating = rating; + } + } catch (e) { + if (this.#movie?.userRating !== undefined) { + this.#movie.userRating = tmp; + } + const not = new Notifier('error', 'Что-то пошло не так', 2000); + not.render(); } - console.log(`Фильм ${this.#movie?.title} оценен на ${rating}`); } - deleteRating() { - if (this.#movie?.userRating) { - this.#movie.userRating = 0; - } - console.log(`Удалена оценка с ${this.#movie?.title}`); + // не удалять + async deleteRatingRequest() { + try { + const response = await apiClient.delete({ + path: `movies/${this.#movie?.id}/rating`, + }); + if (this.#movie?.userRating) { + this.#movie.userRating = 0; + } + } catch (e) {} } async reduce(action: any) { @@ -327,7 +348,7 @@ class MoviePageStore { this.rateMovieRequest(action.payload.rating); break; case ActionTypes.DELETE_RATING: - this.deleteRating(); + this.deleteRatingRequest(); break; default: break; diff --git a/public/store/SearchBlockStore.ts b/public/store/SearchBlockStore.ts index ba2fd5d..9eb9168 100644 --- a/public/store/SearchBlockStore.ts +++ b/public/store/SearchBlockStore.ts @@ -100,7 +100,6 @@ class SearchBlockStore { const response = await apiClient.get({ path: `movies/movies/search?query=${searchQuery}`, }); - console.log(response); this.#findItems = response.map((movie: Movie) => { return serializeMovie(movie); }); diff --git a/public/sw.js b/public/sw.js index 1efaa20..3e5e6de 100644 --- a/public/sw.js +++ b/public/sw.js @@ -2,26 +2,17 @@ const CACHE_NAME = 'cache_v1'; const CACHE_URLS = ['/']; self.addEventListener('install', (event) => { - console.log('Установлен'); event.waitUntil( caches .open(CACHE_NAME) .then((cache) => { - console.log('Install: caching files'); cache.addAll(CACHE_URLS); }) .then(() => self.skipWaiting()), //??? ); - event.waitUntil( - (async () => { - const cache = await caches.open(CACHE_NAME); - await cache.addAll(CACHE_URLS); - })(), - ); }); self.addEventListener('activate', (event) => { - console.log('Чистим старый кэш'); event.waitUntil( caches.keys().then((keyList) => Promise.all( @@ -40,18 +31,16 @@ self.addEventListener('fetch', (event) => { (async () => { try { const response = await fetch(event.request); - const cache = await caches.open(CACHE_NAME); - cache.put(event.request, response.clone()); - - console.log('--------- ВЗЯЛИ ИЗ ИНЕТА'); + if (event.request.destination === 'image') { + const cache = await caches.open(CACHE_NAME); + cache.put(event.request, response.clone()); + } return response; } catch { const cachedResponse = await caches.match(event.request); if (cachedResponse) { - console.log('--------- ВЗЯЛИ ИЗ КЭША'); return cachedResponse; } - console.log('--------- В КЭШЕ ТАКОГО НЕТ'); } })(), );