From 856f80fc6df731b1dbe9efa289ad6a4f728d4e0d Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 6 Feb 2024 11:05:17 -0800 Subject: [PATCH] fix some youtube videos not properly loading (#2726) * add player iframe to bskyweb * iframe for youtube content * update tests * ts error --- __tests__/lib/string.test.ts | 23 +++------ bskyweb/cmd/bskyweb/server.go | 1 + bskyweb/static/iframe/youtube.html | 49 +++++++++++++++++++ src/lib/strings/embed-player.ts | 13 +++-- .../util/post-embeds/ExternalPlayerEmbed.tsx | 8 ++- 5 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 bskyweb/static/iframe/youtube.html diff --git a/__tests__/lib/string.test.ts b/__tests__/lib/string.test.ts index b3aa48f4..f003e5ac 100644 --- a/__tests__/lib/string.test.ts +++ b/__tests__/lib/string.test.ts @@ -462,45 +462,38 @@ describe('parseEmbedPlayerFromUrl', () => { { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_short', source: 'youtubeShorts', hideDetails: true, - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, { type: 'youtube_video', source: 'youtube', - playerUri: - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', }, undefined, @@ -759,8 +752,6 @@ describe('parseEmbedPlayerFromUrl', () => { const res = parseEmbedPlayerFromUrl(input) - console.log(input) - expect(res).toEqual(output) } }) diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go index c4a12a2f..76b7bcc0 100644 --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -159,6 +159,7 @@ func serve(cctx *cli.Context) error { e.GET("/security.txt", func(c echo.Context) error { return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt") }) + e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler)) e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc { return func(c echo.Context) error { path := c.Request().URL.Path diff --git a/bskyweb/static/iframe/youtube.html b/bskyweb/static/iframe/youtube.html new file mode 100644 index 00000000..f2ada2ec --- /dev/null +++ b/bskyweb/static/iframe/youtube.html @@ -0,0 +1,49 @@ + + +
+ diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts index 3270b6f0..21a575b9 100644 --- a/src/lib/strings/embed-player.ts +++ b/src/lib/strings/embed-player.ts @@ -1,4 +1,5 @@ -import {Dimensions, Platform} from 'react-native' +import {Dimensions} from 'react-native' +import {isWeb} from 'platform/detection' const {height: SCREEN_HEIGHT} = Dimensions.get('window') export const embedPlayerSources = [ @@ -73,7 +74,7 @@ export function parseEmbedPlayerFromUrl( return { type: 'youtube_video', source: 'youtube', - playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`, + playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, } } } @@ -92,7 +93,7 @@ export function parseEmbedPlayerFromUrl( type: page === 'shorts' ? 'youtube_short' : 'youtube_video', source: page === 'shorts' ? 'youtubeShorts' : 'youtube', hideDetails: page === 'shorts' ? true : undefined, - playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`, + playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, } } } @@ -103,8 +104,10 @@ export function parseEmbedPlayerFromUrl( urlp.hostname === 'www.twitch.tv' || urlp.hostname === 'm.twitch.tv' ) { - const parent = - Platform.OS === 'web' ? window.location.hostname : 'localhost' + const parent = isWeb + ? // @ts-ignore only for web + window.location.hostname + : 'localhost' const [_, channelOrVideo, clipOrId, id] = urlp.pathname.split('/') diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx index 8b0858b6..d556e766 100644 --- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx @@ -78,9 +78,13 @@ function Player({ onLoad: () => void }) { // ensures we only load what's requested + // when it's a youtube video, we need to allow both bsky.app and youtube.com const onShouldStartLoadWithRequest = React.useCallback( - (event: ShouldStartLoadRequest) => event.url === params.playerUri, - [params.playerUri], + (event: ShouldStartLoadRequest) => + event.url === params.playerUri || + (params.source.startsWith('youtube') && + event.url.includes('www.youtube.com')), + [params.playerUri, params.source], ) // Don't show the player until it is active