From 8b3dee10647659c12ade20033f18bec87179f2fe Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:08:34 -0300 Subject: [PATCH 1/6] Feat: refactor series headers with improved design --- src/styles/content.scss | 38 ++++++++++++++++++++++ src/templates/serie.html | 68 +++++++++++++++++++++------------------- 2 files changed, 74 insertions(+), 32 deletions(-) diff --git a/src/styles/content.scss b/src/styles/content.scss index 1b6ea98..2c8c171 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -33,6 +33,44 @@ } } +#content .list-header { + align-items: flex-start; + display: flex; + flex: 1 1 100%; + flex-flow: row; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 0 0.83rem; + + h1 { + flex: 1; + margin-right: 1rem; + } + + .add-to-watchlist, + .remove-from-watchlist { + flex: 0 1 10rem; + height: auto; + padding: 0.5rem 0.83rem; + + span { + display: inline-block; + vertical-align: middle; + } + span.icon { + background-image: url(../icons/watchlist.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + content: ''; + display: inline-block; + height: 28px; + vertical-align: middle; + width: 28px; + } + } +} + #content .list-info { margin-bottom: 1rem; } diff --git a/src/templates/serie.html b/src/templates/serie.html index 4bd776a..e65042b 100644 --- a/src/templates/serie.html +++ b/src/templates/serie.html @@ -1,6 +1,21 @@ -

- {{ serieName }} -

+
+

+ {{ serieName }} +

+ + + +
{{ if seasonsCount || episodesCount }}
@@ -17,38 +32,27 @@

{{ end }}
-
-
- -
Season
-
-
    - {{ each option in seasons }} -
  • {{ option.name }}
    • - {{ end }} -
-
-
- -
- -
Sort
-
-
    -
  • Ascending
    • -
  • Descending
    • -
-
+
+ +
Season
+
+
    + {{ each option in seasons }} +
  • {{ option.name }}
    • + {{ end }} +
-
- - +
+ +
Sort
+
+
    +
  • Ascending
    • +
  • Descending
    • +
+
From 83ca8c09babd96a60a9ebf8cb475fb623be7b153 Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:10:57 -0300 Subject: [PATCH 2/6] Feat: update filters style for better responsiveness --- src/styles/content.scss | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/styles/content.scss b/src/styles/content.scss index 2c8c171..41cefcc 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -82,13 +82,7 @@ flex-flow: row; flex-wrap: wrap; justify-content: space-between; - margin: 0 0 0.83rem; - - .list-filters-part { - display: flex; - flex: 0 1 auto; - flex-wrap: wrap; - } + margin: 0 -1rem 0.83rem 0; input, .dropdown { @@ -96,6 +90,7 @@ border-color: #FFF; color: #FFF; margin-bottom: 0.5rem; + margin-right: 1rem; } input { @@ -103,9 +98,10 @@ } .dropdown { - //flex: 1 1 12.5rem; - flex: auto; - margin-right: 1rem; + flex: 1; + } + .dropdown + .dropdown { + flex: 0; } .dropdown:focus-within { border-color: #F37521; From 4e772999da21b3e1eaa431bd69fbeeb22621316f Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:30:33 -0300 Subject: [PATCH 3/6] Feat: update premium icon with new design --- src/icons/premium.svg | 4 +++- src/styles/content.scss | 10 +++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/icons/premium.svg b/src/icons/premium.svg index 5e75890..084b27f 100644 --- a/src/icons/premium.svg +++ b/src/icons/premium.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/styles/content.scss b/src/styles/content.scss index 41cefcc..fde3273 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -200,15 +200,15 @@ } #content .list-item-premium { - background: #FFF url(../icons/premium.svg) no-repeat center; + background: #F37521 url(../icons/premium.svg) no-repeat center; background-size: 1.6rem auto; - border-radius: 0.83rem; - height: 2.5rem; - padding: 0.42rem; + border-radius: 0.25rem; + height: 2rem; + padding: 0.25rem; position: absolute; right: 0.625rem; top: 0.625rem; - width: 2.5rem; + width: 2rem; } #content .list-item-info { From 3c295d643110b1bb76efec750a28b29254f346c3 Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:48:30 -0300 Subject: [PATCH 4/6] Refactor: improve metadata reading with alternative episode number reference --- src/scripts/history.ts | 15 ++++++++------- src/scripts/home.ts | 30 ++++++++++++++++-------------- src/scripts/serie.ts | 2 +- src/scripts/video.ts | 25 ++++++++++++++----------- src/scripts/watchlist.ts | 15 ++++++++------- 5 files changed, 47 insertions(+), 40 deletions(-) diff --git a/src/scripts/history.ts b/src/scripts/history.ts index c67aa0f..6a84fa4 100644 --- a/src/scripts/history.ts +++ b/src/scripts/history.ts @@ -47,19 +47,20 @@ const listHistory: Callback = async ({ state, render }) => { const items = response.data.filter((item) => { return item.panel.type === 'episode' }).map((item) => { + const metadata = item.panel.episode_metadata return { id: item.panel.id, image: App.getImage(item.panel.images.thumbnail).source, - number: item.panel.episode_metadata.episode_number, + number: metadata.episode_number || metadata.episode, name: item.panel.title, description: item.panel.description, - duration: item.panel.episode_metadata.duration_ms / 1000, + duration: metadata.duration_ms / 1000, playhead: item.playhead, - premium: item.panel.episode_metadata.is_premium_only, - season_id: item.panel.episode_metadata.season_id, - season_name: item.panel.episode_metadata.season_title, - serie_id: item.panel.episode_metadata.series_id, - serie_name: item.panel.episode_metadata.series_title, + premium: metadata.is_premium_only, + season_id: metadata.season_id, + season_name: metadata.season_title, + serie_id: metadata.series_id, + serie_name: metadata.series_title, } }) diff --git a/src/scripts/home.ts b/src/scripts/home.ts index 9cfda72..bb24214 100644 --- a/src/scripts/home.ts +++ b/src/scripts/home.ts @@ -64,37 +64,39 @@ const listResults: Callback = async ({ state, render }) => { const history = (historyResponse.data || []).filter((item) => { return item.panel.type === 'episode' }).map((item) => { + const metadata = item.panel.episode_metadata return { id: item.panel.id, image: App.getImage(item.panel.images.thumbnail).source, - number: item.panel.episode_metadata.episode_number, + number: metadata.episode_number || metadata.episode, name: item.panel.title, description: item.panel.description, - duration: item.panel.episode_metadata.duration_ms / 1000, + duration: metadata.duration_ms / 1000, playhead: item.playhead, - premium: item.panel.episode_metadata.is_premium_only, - season_id: item.panel.episode_metadata.season_id, - season_name: item.panel.episode_metadata.season_title, - serie_id: item.panel.episode_metadata.series_id, - serie_name: item.panel.episode_metadata.series_title, + premium: metadata.is_premium_only, + season_id: metadata.season_id, + season_name: metadata.season_title, + serie_id: metadata.series_id, + serie_name: metadata.series_title, } }) const watchlistResponse = await App.watchlist({'n': '4'}) const watchlist = (watchlistResponse.data || []).map((item) => { + const metadata = item.panel.episode_metadata return { id: item.panel.id, image: App.getImage(item.panel.images.thumbnail).source, - number: item.panel.episode_metadata.episode_number, + number: metadata.episode_number || metadata.episode, name: item.panel.title, description: item.panel.description, - duration: item.panel.episode_metadata.duration_ms / 1000, + duration: metadata.duration_ms / 1000, playhead: item.playhead, - premium: item.panel.episode_metadata.is_premium_only, - season_id: item.panel.episode_metadata.season_id, - season_name: item.panel.episode_metadata.season_title, - serie_id: item.panel.episode_metadata.series_id, - serie_name: item.panel.episode_metadata.series_title, + premium: metadata.is_premium_only, + season_id: metadata.season_id, + season_name: metadata.season_title, + serie_id: metadata.series_id, + serie_name: metadata.series_title, } }) diff --git a/src/scripts/serie.ts b/src/scripts/serie.ts index 7e0d5a1..0486e40 100644 --- a/src/scripts/serie.ts +++ b/src/scripts/serie.ts @@ -170,7 +170,7 @@ const listEpisodes: Callback = async ({ state, render }) => { return { id: item.id, image: App.getImage(item.images.thumbnail).source, - number: item.episode_number, + number: item.episode_number || item.episode, name: item.title, description: item.description, duration: item.duration_ms / 1000, diff --git a/src/scripts/video.ts b/src/scripts/video.ts index a91e4bc..314bc51 100644 --- a/src/scripts/video.ts +++ b/src/scripts/video.ts @@ -100,10 +100,11 @@ const loadEpisode: Callback = async ({ state }) => { const episodeId = state.episodeId const episodeResponse = await App.episode(episodeId, {}) const episodeInfo = episodeResponse.data[0] + const episodeMetadata = episodeInfo.episode_metadata - const serieName = episodeInfo.episode_metadata.series_title - const seasonNumber = episodeInfo.episode_metadata.season_number - const episodeNumber = Number(episodeInfo.episode_metadata.episode_number) + const serieName = episodeMetadata.series_title + const seasonNumber = episodeMetadata.season_number + const episodeNumber = episodeMetadata.episode_number || episodeMetadata.episode const episodeName = episodeInfo.title const streamsLink = String(episodeInfo.streams_link) @@ -140,11 +141,12 @@ const loadClosestEpisodes: Callback = async ({ state }) => { if( previousResponse.data && previousResponse.data.length ){ const item = previousResponse.data[0].panel - const serieId = item.episode_metadata.series_id - const seasonId = item.episode_metadata.season_id + const metadata = item.episode_metadata + const serieId = metadata.series_id + const seasonId = metadata.season_id const episodeId = item.id - const seasonNumber = item.episode_metadata.season_number - const episodeNumber = item.episode_metadata.episode_number + const seasonNumber = metadata.season_number + const episodeNumber = metadata.episode_number || metadata.episode const episodeUrl = '/serie/' + serieId + '/season/' + seasonId + '/episode/' + episodeId + '/video' previous.dataset.url = episodeUrl @@ -157,11 +159,12 @@ const loadClosestEpisodes: Callback = async ({ state }) => { if( nextResponse.data && nextResponse.data.length ){ const item = nextResponse.data[0].panel - const serieId = item.episode_metadata.series_id - const seasonId = item.episode_metadata.season_id + const metadata = item.episode_metadata + const serieId = metadata.series_id + const seasonId = metadata.season_id const episodeId = item.id - const seasonNumber = item.episode_metadata.season_number - const episodeNumber = item.episode_metadata.episode_number + const seasonNumber = metadata.season_number + const episodeNumber = metadata.episode_number || metadata.episode const episodeUrl = '/serie/' + serieId + '/season/' + seasonId + '/episode/' + episodeId + '/video' next.dataset.url = episodeUrl diff --git a/src/scripts/watchlist.ts b/src/scripts/watchlist.ts index deb281c..aba1ef8 100644 --- a/src/scripts/watchlist.ts +++ b/src/scripts/watchlist.ts @@ -47,19 +47,20 @@ const listWatchlist: Callback = async ({ state, render }) => { }) const items = response.data.map((item) => { + const metadata = item.panel.episode_metadata return { id: item.panel.id, image: App.getImage(item.panel.images.thumbnail).source, - number: item.panel.episode_metadata.episode_number, + number: metadata.episode_number || metadata.episode, name: item.panel.title, description: item.panel.description, - duration: item.panel.episode_metadata.duration_ms / 1000, + duration: metadata.duration_ms / 1000, playhead: item.playhead, - premium: item.panel.episode_metadata.is_premium_only, - season_id: item.panel.episode_metadata.season_id, - season_name: item.panel.episode_metadata.season_title, - serie_id: item.panel.episode_metadata.series_id, - serie_name: item.panel.episode_metadata.series_title, + premium: metadata.is_premium_only, + season_id: metadata.season_id, + season_name: metadata.season_title, + serie_id: metadata.series_id, + serie_name: metadata.series_title, } }) From fdb7141382a5c588a78b46250199e65eada48cd8 Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:53:35 -0300 Subject: [PATCH 5/6] Feat: improve seasons listing with ordered results --- src/scripts/serie.ts | 9 +++++++-- src/templates/serie.html | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/scripts/serie.ts b/src/scripts/serie.ts index 0486e40..3a08cf8 100644 --- a/src/scripts/serie.ts +++ b/src/scripts/serie.ts @@ -124,11 +124,16 @@ const listSerieInfo: Callback = async ({ state }) => { const seasons = seasonsResponse.items.map((item) => { return { id: item.id, - name: 'S' + item.season_number + ': ' + item.title + number: item.season_number, + name: item.title } }) - state.seasons = seasons + state.seasons = seasons.sort((a, b) => { + if(a.number < b.number) { return -1; } + if(a.number > b.number) { return 1; } + return 0; + }) if( !state.seasonId && seasons.length ){ state.seasonId = seasons[0].id diff --git a/src/templates/serie.html b/src/templates/serie.html index e65042b..3e15576 100644 --- a/src/templates/serie.html +++ b/src/templates/serie.html @@ -38,7 +38,7 @@

    {{ each option in seasons }} -
  • {{ option.name }}
    • +
  • S{{ option.number }} - {{ option.name }}
    • {{ end }}
From 85a017cf1a04e034f81d66b183074c8144dcf636 Mon Sep 17 00:00:00 2001 From: Mateus Souza Date: Sat, 10 Feb 2024 12:56:39 -0300 Subject: [PATCH 6/6] Style: whitespace cleaning --- src/scripts/api.ts | 6 +++--- src/scripts/app.ts | 10 +++++----- src/scripts/explore.ts | 6 +++--- src/scripts/history.ts | 2 +- src/scripts/login.ts | 4 ++-- src/scripts/search.ts | 8 ++++---- src/scripts/serie.ts | 4 ++-- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/scripts/api.ts b/src/scripts/api.ts index 866c011..23462ed 100644 --- a/src/scripts/api.ts +++ b/src/scripts/api.ts @@ -61,7 +61,7 @@ const request = async (method: string, endpoint: string, body: any, headers: Hea } const result = await fetch(url, requestOptions) - + if( result.status === 204 ){ return {} as Result } @@ -85,7 +85,7 @@ const makeLogin = async (username: string, password: string) => { scope: 'offline_access', }) - + const headers = new Headers() headers.append('Content-Type', 'application/x-www-form-urlencoded') headers.append('Authorization', 'Basic ' + authToken); @@ -314,7 +314,7 @@ const watchlist = async (accessToken: string, accountId: string, filters: Data) * @returns */ const inWatchlist = async (accessToken: string, accountId: string, filters: Data) => { - + var headers = new Headers() headers.append('Authorization', 'Bearer ' + accessToken) headers.append('Content-Type', 'application/x-www-form-urlencoded') diff --git a/src/scripts/app.ts b/src/scripts/app.ts index b6a1733..8016a5a 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -16,8 +16,8 @@ const getTemplate = async (name: string, data: any) => { /** * Retrieve image information - * @param images - * @returns + * @param images + * @returns */ const getImage = (images: any[]) => { @@ -25,7 +25,7 @@ const getImage = (images: any[]) => { if( images && images.length ){ image.source = images[0][0].source } - + return image } @@ -589,7 +589,7 @@ const setProgress = async (filters: Data, data: Data) => { * @returns */ const serie = async (serieId: string, filters: Data) => { - + await refreshSession() const accessToken = localStorage.getItem('accessToken') @@ -686,7 +686,7 @@ const episode = async (episodeId: string, filters: Data) => { const accessToken = localStorage.getItem('accessToken') const preferredContentAudioLanguage = localStorage.getItem('preferredContentAudioLanguage') const preferredCommunicationLanguage = localStorage.getItem('preferredCommunicationLanguage') - + filters['preferred_audio_language'] = preferredContentAudioLanguage filters['locale'] = preferredCommunicationLanguage diff --git a/src/scripts/explore.ts b/src/scripts/explore.ts index 23be7f1..099832d 100644 --- a/src/scripts/explore.ts +++ b/src/scripts/explore.ts @@ -92,13 +92,13 @@ const listResults: Callback = async ({ state, render }) => { let total = 0 let items = [] - + // Special listings if ( category && special ){ const response = await App.browser({ 'type': 'series', 'sort_by': sort, - 'start': offset.toString(), + 'start': offset.toString(), 'n': limit.toString() }) @@ -118,7 +118,7 @@ const listResults: Callback = async ({ state, render }) => { 'type': 'series', 'categories': category, 'sort_by': sort, - 'start': offset.toString(), + 'start': offset.toString(), 'n': limit.toString() }) diff --git a/src/scripts/history.ts b/src/scripts/history.ts index 6a84fa4..2ceca3a 100644 --- a/src/scripts/history.ts +++ b/src/scripts/history.ts @@ -72,7 +72,7 @@ const listHistory: Callback = async ({ state, render }) => { }) } catch (error) { - + await render({ loaded: true, error: true, diff --git a/src/scripts/login.ts b/src/scripts/login.ts index 1239484..ef27e09 100644 --- a/src/scripts/login.ts +++ b/src/scripts/login.ts @@ -26,8 +26,8 @@ const makeLogin: Callback = async ({ element, render }) => { await App.login(username.value, password.value) Route.redirect('/home') } catch (error) { - await render({ - message: error.message + await render({ + message: error.message }) } diff --git a/src/scripts/search.ts b/src/scripts/search.ts index e9f993f..135c87e 100644 --- a/src/scripts/search.ts +++ b/src/scripts/search.ts @@ -66,13 +66,13 @@ const listResults: Callback = async ({ state, render }) => { const response = await App.search({ 'type': 'series', 'q': query, - 'start': offset.toString(), + 'start': offset.toString(), 'n': limit.toString() }) - const data = { - count: 0, - items: [] + const data = { + count: 0, + items: [] } if( response.data && response.data.length ){ diff --git a/src/scripts/serie.ts b/src/scripts/serie.ts index 3a08cf8..8bbaf05 100644 --- a/src/scripts/serie.ts +++ b/src/scripts/serie.ts @@ -206,7 +206,7 @@ const listEpisodes: Callback = async ({ state, render }) => { }) } catch (error) { - + await render({ loaded: true, error: true, @@ -232,7 +232,7 @@ const onMount: Callback = async (component) => { const serieId = component.state.serieId Route.redirect('/serie/' + serieId + '/season/' + target.value) }) - + on(element, 'change', 'input#sort', (_event, target: HTMLInputElement) => { const serieId = component.state.serieId const seasonId = component.state.seasonId