zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

fix some youtube videos not properly loading (#2726) 

* add player iframe to bskyweb

* iframe for youtube content

* update tests

* ts error
zio/stable
Hailey 2024-02-06 11:05:17 -08:00 committed by GitHub
parent a9ab13e5a9
commit 856f80fc6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 71 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
__tests__/lib/string.test.ts
View File

@ -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)
}
})

1
bskyweb/cmd/bskyweb/server.go
View File

@ -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

49
bskyweb/static/iframe/youtube.html 100644
View File

@ -0,0 +1,49 @@
<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="container"><div class="video" id="player"></div></div>
<script>
const url = new URL(window.location)
const viewport = document.querySelector("meta[name=viewport]")
const tag = document.createElement("script")
tag.src = "https://www.youtube.com/iframe_api"
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: "1000",
height: "1000",
videoId: url.searchParams.get('videoId'),
playerVars: {
autoplay: 1,
start: url.searchParams.get('start'),
rel: 0,
loop: 0,
playsinline: 1,
origin: url.origin
},
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
</script>

13
src/lib/strings/embed-player.ts
View File

@ -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('/')

8
src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
View File

@ -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