fix some youtube videos not properly loading (#2726) · robinwobin.dev/witchsky.app@856f80f

+7 -16

__tests__/lib/string.test.ts

··· 462 462 { 463 463 type: 'youtube_video', 464 464 source: 'youtube', 465 - playerUri: 466 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 465 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 467 466 }, 468 467 { 469 468 type: 'youtube_video', 470 469 source: 'youtube', 471 - playerUri: 472 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 470 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 473 471 }, 474 472 { 475 473 type: 'youtube_video', 476 474 source: 'youtube', 477 - playerUri: 478 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 475 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 479 476 }, 480 477 { 481 478 type: 'youtube_video', 482 479 source: 'youtube', 483 - playerUri: 484 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 480 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 485 481 }, 486 482 { 487 483 type: 'youtube_video', 488 484 source: 'youtube', 489 - playerUri: 490 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 485 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 491 486 }, 492 487 { 493 488 type: 'youtube_short', 494 489 source: 'youtubeShorts', 495 490 hideDetails: true, 496 - playerUri: 497 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 491 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 498 492 }, 499 493 { 500 494 type: 'youtube_video', 501 495 source: 'youtube', 502 - playerUri: 503 - 'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0', 496 + playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0', 504 497 }, 505 498 506 499 undefined, ··· 758 751 const output = outputs[i] 759 752 760 753 const res = parseEmbedPlayerFromUrl(input) 761 - 762 - console.log(input) 763 754 764 755 expect(res).toEqual(output) 765 756 }

+1

bskyweb/cmd/bskyweb/server.go

··· 159 159 e.GET("/security.txt", func(c echo.Context) error { 160 160 return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt") 161 161 }) 162 + e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler)) 162 163 e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc { 163 164 return func(c echo.Context) error { 164 165 path := c.Request().URL.Path

+49

bskyweb/static/iframe/youtube.html

··· 1 + <!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" /> 2 + <style> 3 + body { 4 + margin: 0; 5 + } 6 + .container { 7 + position: relative; 8 + width: 100%; 9 + height: 0; 10 + padding-bottom: 56.25%; 11 + } 12 + .video { 13 + position: absolute; 14 + top: 0; 15 + left: 0; 16 + width: 100%; 17 + height: 100%; 18 + } 19 + </style> 20 + <div class="container"><div class="video" id="player"></div></div> 21 + <script> 22 + const url = new URL(window.location) 23 + const viewport = document.querySelector("meta[name=viewport]") 24 + 25 + const tag = document.createElement("script") 26 + tag.src = "https://www.youtube.com/iframe_api" 27 + const firstScriptTag = document.getElementsByTagName('script')[0]; 28 + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 29 + 30 + let player 31 + function onYouTubeIframeAPIReady() { 32 + player = new YT.Player('player', { 33 + width: "1000", 34 + height: "1000", 35 + videoId: url.searchParams.get('videoId'), 36 + playerVars: { 37 + autoplay: 1, 38 + start: url.searchParams.get('start'), 39 + rel: 0, 40 + loop: 0, 41 + playsinline: 1, 42 + origin: url.origin 43 + }, 44 + }); 45 + } 46 + function onPlayerReady(event) { 47 + event.target.playVideo(); 48 + } 49 + </script>

+8 -5

src/lib/strings/embed-player.ts

··· 1 - import {Dimensions, Platform} from 'react-native' 1 + import {Dimensions} from 'react-native' 2 + import {isWeb} from 'platform/detection' 2 3 const {height: SCREEN_HEIGHT} = Dimensions.get('window') 3 4 4 5 export const embedPlayerSources = [ ··· 73 74 return { 74 75 type: 'youtube_video', 75 76 source: 'youtube', 76 - playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`, 77 + playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, 77 78 } 78 79 } 79 80 } ··· 92 93 type: page === 'shorts' ? 'youtube_short' : 'youtube_video', 93 94 source: page === 'shorts' ? 'youtubeShorts' : 'youtube', 94 95 hideDetails: page === 'shorts' ? true : undefined, 95 - playerUri: `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&start=${seek}`, 96 + playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, 96 97 } 97 98 } 98 99 } ··· 103 104 urlp.hostname === 'www.twitch.tv' || 104 105 urlp.hostname === 'm.twitch.tv' 105 106 ) { 106 - const parent = 107 - Platform.OS === 'web' ? window.location.hostname : 'localhost' 107 + const parent = isWeb 108 + ? // @ts-ignore only for web 109 + window.location.hostname 110 + : 'localhost' 108 111 109 112 const [_, channelOrVideo, clipOrId, id] = urlp.pathname.split('/') 110 113

+6 -2

src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx

··· 78 78 onLoad: () => void 79 79 }) { 80 80 // ensures we only load what's requested 81 + // when it's a youtube video, we need to allow both bsky.app and youtube.com 81 82 const onShouldStartLoadWithRequest = React.useCallback( 82 - (event: ShouldStartLoadRequest) => event.url === params.playerUri, 83 - [params.playerUri], 83 + (event: ShouldStartLoadRequest) => 84 + event.url === params.playerUri || 85 + (params.source.startsWith('youtube') && 86 + event.url.includes('www.youtube.com')), 87 + [params.playerUri, params.source], 84 88 ) 85 89 86 90 // Don't show the player until it is active

Configure Feed

Configure Feed