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/scripts/api.ts b/src/scripts/api.ts index 342fd0c..abb9ff5 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 } @@ -323,7 +323,7 @@ const watchlist = async (accessToken: string, accountId: string, filters: Data) * @returns */ const inWatchlist = async (accessToken: string, accountId: string, filters: Data) => { - + const headers = { 'Authorization': 'Bearer ' + accessToken, '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 f257ed9..a0c7f6b 100644 --- a/src/scripts/history.ts +++ b/src/scripts/history.ts @@ -48,19 +48,20 @@ const listHistory: Callback = async ({ state, render }) => { const items = 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, } }) @@ -72,7 +73,7 @@ const listHistory: Callback = async ({ state, render }) => { }) } catch (error) { - + await render({ loaded: true, error: true, diff --git a/src/scripts/home.ts b/src/scripts/home.ts index 80a0f07..a271c12 100644 --- a/src/scripts/home.ts +++ b/src/scripts/home.ts @@ -67,38 +67,40 @@ const listResults: Callback = async ({ state, render }) => { const history = historyData.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 watchlistData = watchlistResponse.data || [] const watchlist = watchlistData.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/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 34cad34..4498998 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 2c9a1a0..af2ba3d 100644 --- a/src/scripts/serie.ts +++ b/src/scripts/serie.ts @@ -125,11 +125,16 @@ const listSerieInfo: Callback = async ({ state }) => { const seasons = seasonItems.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 @@ -171,7 +176,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, @@ -202,7 +207,7 @@ const listEpisodes: Callback = async ({ state, render }) => { }) } catch (error) { - + await render({ loaded: true, error: true, @@ -228,7 +233,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 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 8c78712..1233cf7 100644 --- a/src/scripts/watchlist.ts +++ b/src/scripts/watchlist.ts @@ -48,19 +48,20 @@ const listWatchlist: Callback = async ({ state, render }) => { const data = response.data || [] const items = 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/styles/content.scss b/src/styles/content.scss index 1b6ea98..fde3273 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; } @@ -44,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 { @@ -58,6 +90,7 @@ border-color: #FFF; color: #FFF; margin-bottom: 0.5rem; + margin-right: 1rem; } input { @@ -65,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; @@ -166,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 { diff --git a/src/templates/serie.html b/src/templates/serie.html index 4bd776a..3e15576 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 }} +
  • S{{ option.number }} - {{ option.name }}
    • + {{ end }} +
-
- - +
+ +
Sort
+
+
    +
  • Ascending
    • +
  • Descending
    • +
+