From 44cfd4ddfa02bf409500606497050184e2b10181 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Thu, 30 May 2024 09:26:15 -0600 Subject: [PATCH 01/11] update thumbnail selection, add height and width info --- scripts/youtube.py | 6 +++++- src/lib/interfaces.ts | 2 ++ src/lib/utils.test.ts | 12 ++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/scripts/youtube.py b/scripts/youtube.py index 1aad06b6..b7176d66 100644 --- a/scripts/youtube.py +++ b/scripts/youtube.py @@ -34,6 +34,8 @@ class YoutubeChannel: channelCustomName: str channelName: str channelPic: str + channelPicH: int + channelPicW: int channelSubCount: int @@ -132,9 +134,11 @@ def save_channel_data(channel_ids: List[str], youtube: build): channelId=item["id"], channelCustomName=item["snippet"]["customUrl"], channelName=item["snippet"]["title"], - channelPic=item["snippet"]["thumbnails"]["default"]["url"].split("=")[ + channelPic=item["snippet"]["thumbnails"]["medium"]["url"].split("=")[ 0 ], # Can set ?s= on the end to get a custom resolution + channelPicH=item["snippet"]["thumbnails"]["medium"]["height"] + channelPicW=item["snippet"]["thumbnails"]["medium"]["width"] channelSubCount=int(item["statistics"]["subscriberCount"]), ) channels.append(youtube_channel) diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 018fad02..be185b65 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -18,6 +18,8 @@ export interface YoutubeChannel { channelCustomName: string // e.g. "@notjustbikes" channelName: string // e.g. "Not Just Bikes" channelPic: string // e.g. "https://yt3.ggpht.com/5DBP22k02WIMvHgeoUj_Tt14Kh8u-oaAhYHQu1gXCoHuisGXnavb5k-ivpyffqIARNDzgpBbUw" + channelPicH: number // e.g. 180 (for 180px) + channelPicW: number // e.g. 320 (for 320px) channelSubCount: number } diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts index f8d00421..a1137a16 100644 --- a/src/lib/utils.test.ts +++ b/src/lib/utils.test.ts @@ -39,6 +39,8 @@ describe("YouTube Utilities", () => { channelCustomName: "climate town", channelName: "climate town", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 2, }, { @@ -46,6 +48,8 @@ describe("YouTube Utilities", () => { channelCustomName: "FAKE1", channelName: "FAKE1", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 100, }, { @@ -53,6 +57,8 @@ describe("YouTube Utilities", () => { channelCustomName: "FAKE2", channelName: "FAKE2", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 270, }, { @@ -60,6 +66,8 @@ describe("YouTube Utilities", () => { channelCustomName: "FAKE3", channelName: "FAKE3", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 5, }, ] @@ -85,6 +93,8 @@ describe("getChannelData", () => { channelCustomName: "climate town", channelName: "climate town", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 2, }, { @@ -92,6 +102,8 @@ describe("getChannelData", () => { channelCustomName: "FAKE1", channelName: "FAKE1", channelPic: "", + channelPicH: 180, + channelPicW: 320, channelSubCount: 100, }, ] From 3a7e6f7001fbd966156e68bfb33f8d67169f2323 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Tue, 11 Jun 2024 10:11:54 -0600 Subject: [PATCH 02/11] fix filter --- src/routes/youtube/+page.svelte | 20 ++---- src/routes/youtube/YoutubeThumbnail.svelte | 79 +++++++--------------- 2 files changed, 30 insertions(+), 69 deletions(-) diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index f0129446..644103ca 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -34,21 +34,15 @@ filterObject.push(channelOption) } - function filterResources( - event: CustomEvent<{ - filterOptions: FilterOption[] - filterLogic: FilterLogic - }> - ) { - const { filterOptions } = event.detail + const filterResources = ( + event: CustomEvent<{ filterTags: Set; filterLogic: FilterLogic }> + ) => { + const { filterTags } = event.detail + const filterOptions = Array.from(filterTags) displayedVideos = [] - const filteredActiveChannelIds: string[] = filterOptions - .filter((channel: FilterOption) => channel.active === true) - .map((channel: FilterOption) => (channel.id ? channel.id : channel.name)) - const filteredVideos: YoutubeVideo[] = videoData.filter((video) => - filteredActiveChannelIds.includes(video.channelId) + filterOptions.includes(video.channelName) ) // Force svelte re-render @@ -69,7 +63,7 @@ the latest long-form videos from each YouTuber. diff --git a/src/routes/youtube/YoutubeThumbnail.svelte b/src/routes/youtube/YoutubeThumbnail.svelte index 6d2b444c..1f15efef 100644 --- a/src/routes/youtube/YoutubeThumbnail.svelte +++ b/src/routes/youtube/YoutubeThumbnail.svelte @@ -1,70 +1,37 @@ - -
+ {title} thumbnail -
- -
- {@html title} -
- - {@html channelName} +
+ {@html title}
-
- + + + {@html channelName} +
From 90d631b50da1482ef4f583d20d7d7879a61db34e Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 4 Jul 2024 02:28:19 +0000 Subject: [PATCH 03/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/lib/utils.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts index a1137a16..b9ce609d 100644 --- a/src/lib/utils.test.ts +++ b/src/lib/utils.test.ts @@ -94,7 +94,7 @@ describe("getChannelData", () => { channelName: "climate town", channelPic: "", channelPicH: 180, - channelPicW: 320, + channelPicW: 320, channelSubCount: 2, }, { @@ -103,7 +103,7 @@ describe("getChannelData", () => { channelName: "FAKE1", channelPic: "", channelPicH: 180, - channelPicW: 320, + channelPicW: 320, channelSubCount: 100, }, ] From 3a53d71f8930f768f7203af0858ddd5d86a757f5 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 12 Aug 2024 13:30:20 -0600 Subject: [PATCH 04/11] missing comma --- scripts/youtube.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/youtube.py b/scripts/youtube.py index b7176d66..316c1f09 100644 --- a/scripts/youtube.py +++ b/scripts/youtube.py @@ -137,8 +137,8 @@ def save_channel_data(channel_ids: List[str], youtube: build): channelPic=item["snippet"]["thumbnails"]["medium"]["url"].split("=")[ 0 ], # Can set ?s= on the end to get a custom resolution - channelPicH=item["snippet"]["thumbnails"]["medium"]["height"] - channelPicW=item["snippet"]["thumbnails"]["medium"]["width"] + channelPicH=item["snippet"]["thumbnails"]["medium"]["height"], + channelPicW=item["snippet"]["thumbnails"]["medium"]["width"], channelSubCount=int(item["statistics"]["subscriberCount"]), ) channels.append(youtube_channel) From 695f38939f22f2766278e1a3fdf8f4fde06c1e1a Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 12 Aug 2024 18:40:32 -0600 Subject: [PATCH 05/11] update youtube thumbnail - give channel pic and video pic --- scripts/youtube.py | 12 ++++++--- src/lib/interfaces.ts | 3 +++ src/routes/youtube/+page.svelte | 6 ++--- src/routes/youtube/YoutubeThumbnail.svelte | 29 ++++++++++++++-------- 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/scripts/youtube.py b/scripts/youtube.py index 316c1f09..488abcbc 100644 --- a/scripts/youtube.py +++ b/scripts/youtube.py @@ -45,6 +45,9 @@ class YoutubeVideo: publishedAt: str videoId: str title: str + videoPic: str + videoPicH: int + videoPicW: int @property def published_dt(self): @@ -83,6 +86,9 @@ async def get_videos_from_channels(channel_ids: List[str], youtube: build): videoId=item["id"]["videoId"], channelId=item["snippet"]["channelId"], title=item["snippet"]["title"], + videoPic=item["snippet"]["thumbnails"]["medium"]["url"], + videoPicW=item["snippet"]["thumbnails"]["medium"]["width"], + videoPicH=item["snippet"]["thumbnails"]["medium"]["height"] ) channel_videos.append(video) @@ -134,11 +140,11 @@ def save_channel_data(channel_ids: List[str], youtube: build): channelId=item["id"], channelCustomName=item["snippet"]["customUrl"], channelName=item["snippet"]["title"], - channelPic=item["snippet"]["thumbnails"]["medium"]["url"].split("=")[ + channelPic=item["snippet"]["thumbnails"]["default"]["url"].split("=")[ 0 ], # Can set ?s= on the end to get a custom resolution - channelPicH=item["snippet"]["thumbnails"]["medium"]["height"], - channelPicW=item["snippet"]["thumbnails"]["medium"]["width"], + channelPicH=item["snippet"]["thumbnails"]["default"]["height"], + channelPicW=item["snippet"]["thumbnails"]["default"]["width"], channelSubCount=int(item["statistics"]["subscriberCount"]), ) channels.append(youtube_channel) diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index be185b65..194a283a 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -28,6 +28,9 @@ export interface YoutubeVideo { publishedAt: string videoId: string title: string + videoPic: string + videoPicH: number // e.g. 180 (for 180px) + videoPicW: number // e.g. 320 (for 320px) } export interface FilterOption extends Tag { diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index 644103ca..d8ed1da0 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -19,7 +19,7 @@ let displayedVideoLimit: number = DEFAULT_DISPLAY_LIMIT $: displayedVideoLimit - let displayedVideos = videoData + let displayedVideos: YoutubeVideo[] = videoData let rerender: boolean = false // Creating form filter options, default view @@ -42,7 +42,7 @@ displayedVideos = [] const filteredVideos: YoutubeVideo[] = videoData.filter((video) => - filterOptions.includes(video.channelName) + filterOptions.includes(video.channelId) ) // Force svelte re-render @@ -75,7 +75,7 @@ {#each displayedVideos.slice(0, displayedVideoLimit) as video}
    • diff --git a/src/routes/youtube/YoutubeThumbnail.svelte b/src/routes/youtube/YoutubeThumbnail.svelte index 1f15efef..9e0dff05 100644 --- a/src/routes/youtube/YoutubeThumbnail.svelte +++ b/src/routes/youtube/YoutubeThumbnail.svelte @@ -1,25 +1,27 @@
    + {#if videoPic} {title} thumbnail + {/if}
    @@ -27,11 +29,16 @@
    - {@html channelName} + {/if} + {channelName} +
    From 2b9b76e0b7e6889ed94797a43477ba9a9e26b024 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 13 Aug 2024 00:40:51 +0000 Subject: [PATCH 06/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- scripts/youtube.py | 2 +- src/routes/youtube/YoutubeThumbnail.svelte | 33 +++++++++++++--------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/scripts/youtube.py b/scripts/youtube.py index 488abcbc..122202a6 100644 --- a/scripts/youtube.py +++ b/scripts/youtube.py @@ -88,7 +88,7 @@ async def get_videos_from_channels(channel_ids: List[str], youtube: build): title=item["snippet"]["title"], videoPic=item["snippet"]["thumbnails"]["medium"]["url"], videoPicW=item["snippet"]["thumbnails"]["medium"]["width"], - videoPicH=item["snippet"]["thumbnails"]["medium"]["height"] + videoPicH=item["snippet"]["thumbnails"]["medium"]["height"], ) channel_videos.append(video) diff --git a/src/routes/youtube/YoutubeThumbnail.svelte b/src/routes/youtube/YoutubeThumbnail.svelte index 9e0dff05..0d0bc377 100644 --- a/src/routes/youtube/YoutubeThumbnail.svelte +++ b/src/routes/youtube/YoutubeThumbnail.svelte @@ -13,14 +13,14 @@ > {#if videoPic} - + {/if}
    - {#if channelPic} - - {/if} - {channelName} - + {#if channelPic} + + {/if} + {channelName} +
    From db316d8de656017a4fd899df5e35a7f38a6f7118 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 12 Aug 2024 19:33:22 -0600 Subject: [PATCH 07/11] restore filter from url onMount logic --- src/routes/youtube/+page.svelte | 68 ++++++++++++++++++++++----------- 1 file changed, 45 insertions(+), 23 deletions(-) diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index d8ed1da0..fdfaf10b 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -1,4 +1,6 @@

    Climate YouTube

    @@ -65,25 +89,23 @@ -{#key rerender} -
      - {#each displayedVideos.slice(0, displayedVideoLimit) as video} -
    1. - -
      2. - {:else} -
    2. No videos here!
      3. - {/each} -
    -{/key} +
      + {#each displayedVideos.slice(0, displayedVideoLimit) as video} +
    1. + +
      2. + {:else} +
    2. No videos here!
      3. + {/each} +

    Those are all the videos!

    From 50c6fc78cc151f54f560dc516ac9bc8f3d8189c0 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 13 Aug 2024 01:34:02 +0000 Subject: [PATCH 08/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/routes/youtube/+page.svelte | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index fdfaf10b..335f2433 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -45,17 +45,18 @@ event: CustomEvent<{ filterTags: Set; filterLogic: FilterLogic }> ) => { const { filterTags } = event.detail - applyVideoFilter(filterTags); + applyVideoFilter(filterTags) } const applyVideoFilter = (filterTags: Set) => { - const selectedChannels = Array.from(filterTags).map((option) => getChannelIdFromName(option)?.channelId) + const selectedChannels = Array.from(filterTags).map( + (option) => getChannelIdFromName(option)?.channelId + ) - displayedVideos = [] const filteredVideos: YoutubeVideo[] = videoData.filter((video) => - selectedChannels.includes(video.channelId) + selectedChannels.includes(video.channelId) ) // Force svelte re-render @@ -69,14 +70,11 @@ onMount(() => { const params = Object.fromEntries($page.url.searchParams) - if (params.tags) { - filterObject = tagQParamSetActive(params.tags, filterObject) - } - - applyVideoFilter( - activeTagsSet(filterObject) - ) - + if (params.tags) { + filterObject = tagQParamSetActive(params.tags, filterObject) + } + + applyVideoFilter(activeTagsSet(filterObject)) }) From b8466f4e39ea9905d152e4b55e26ff7a490b7265 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 12 Aug 2024 19:37:56 -0600 Subject: [PATCH 09/11] hide clear all for youtube page --- src/lib/components/FilterForm.svelte | 23 +++++++----- src/routes/youtube/+page.svelte | 55 +++++++++++++++------------- 2 files changed, 42 insertions(+), 36 deletions(-) diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index 2efde927..cab90069 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -35,6 +35,7 @@ $: ({ filterOptions } = filterData) export let showFilterLogic: boolean = true + export let showReset: boolean = true // Whether all the selected tags must match the resource (vs any of the selected tags) let filterLogicAndCtrl: boolean = filterData?.filterLogicAnd ?? true let filterLogic: FilterLogic @@ -128,16 +129,18 @@ > {/if} - - - Clear All - + {#if showReset} + + + Clear All + + {/if} diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index fdfaf10b..78b673a4 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -24,6 +24,7 @@ let displayedVideoLimit: number = DEFAULT_DISPLAY_LIMIT $: displayedVideoLimit let displayedVideos: YoutubeVideo[] = [...videoData] + let rerender: boolean = false // Creating form filter options, default view let filterObject: FilterOption[] = [] @@ -45,21 +46,23 @@ event: CustomEvent<{ filterTags: Set; filterLogic: FilterLogic }> ) => { const { filterTags } = event.detail - applyVideoFilter(filterTags); + applyVideoFilter(filterTags) } const applyVideoFilter = (filterTags: Set) => { - const selectedChannels = Array.from(filterTags).map((option) => getChannelIdFromName(option)?.channelId) + const selectedChannels = Array.from(filterTags).map( + (option) => getChannelIdFromName(option)?.channelId + ) - displayedVideos = [] const filteredVideos: YoutubeVideo[] = videoData.filter((video) => - selectedChannels.includes(video.channelId) + selectedChannels.includes(video.channelId) ) // Force svelte re-render displayedVideos = filteredVideos + rerender = !rerender } const updateLimit = (event: CustomEvent<{ displayLimit: number }>) => { @@ -69,14 +72,11 @@ onMount(() => { const params = Object.fromEntries($page.url.searchParams) - if (params.tags) { - filterObject = tagQParamSetActive(params.tags, filterObject) - } - - applyVideoFilter( - activeTagsSet(filterObject) - ) - + if (params.tags) { + filterObject = tagQParamSetActive(params.tags, filterObject) + } + + applyVideoFilter(activeTagsSet(filterObject)) }) @@ -89,23 +89,26 @@ -
      - {#each displayedVideos.slice(0, displayedVideoLimit) as video} -
    1. - -
      2. - {:else} -
    2. No videos here!
      3. - {/each} -
    +{#key rerender} +
      + {#each displayedVideos.slice(0, displayedVideoLimit) as video} +
    1. + +
      2. + {:else} +
    2. No videos here!
      3. + {/each} +
    +{/key}

    Those are all the videos!

    From a2f5988875f41262dffc60e2779e3a0fc7488ced Mon Sep 17 00:00:00 2001 From: dmlbs Date: Wed, 21 Aug 2024 15:58:53 -0600 Subject: [PATCH 10/11] update getChannelData util to throw error + test --- src/lib/utils.test.ts | 4 ++++ src/lib/utils.ts | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts index b9ce609d..301fac3c 100644 --- a/src/lib/utils.test.ts +++ b/src/lib/utils.test.ts @@ -113,6 +113,10 @@ describe("getChannelData", () => { expect(res?.channelName).toBe("climate town") }) + + it("should throw error for no channel found", () => { + expect(() => getChannelData(ytList, "fake")).toThrowError(`Channel ID with name 'fake' could not be found`) + }) }) describe("Emoji Utilities", () => { diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 3461d6b7..e284d1d9 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -55,8 +55,13 @@ export const sortChannelBySubCount = ( export const getChannelData = ( channelData: YoutubeChannel[], channelId: string -): YoutubeChannel | undefined => { - return channelData.find((channel) => channel.channelId === channelId) +): YoutubeChannel => { + const channel = channelData.find((channel) => channel.channelId === channelId) + if (!channel) { + throw new Error(`Channel ID with name '${channelId}' could not be found.`); + } + + return channel; } /** From 8fab131278b4f240b6367a460c4572caecc35dc1 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 21 Aug 2024 21:59:10 +0000 Subject: [PATCH 11/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/lib/utils.test.ts | 4 +++- src/lib/utils.ts | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts index 301fac3c..5f3e84ce 100644 --- a/src/lib/utils.test.ts +++ b/src/lib/utils.test.ts @@ -115,7 +115,9 @@ describe("getChannelData", () => { }) it("should throw error for no channel found", () => { - expect(() => getChannelData(ytList, "fake")).toThrowError(`Channel ID with name 'fake' could not be found`) + expect(() => getChannelData(ytList, "fake")).toThrowError( + `Channel ID with name 'fake' could not be found` + ) }) }) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index e284d1d9..149e33fa 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -58,10 +58,10 @@ export const getChannelData = ( ): YoutubeChannel => { const channel = channelData.find((channel) => channel.channelId === channelId) if (!channel) { - throw new Error(`Channel ID with name '${channelId}' could not be found.`); + throw new Error(`Channel ID with name '${channelId}' could not be found.`) } - return channel; + return channel } /**