fix some youtube videos not properly loading (#2726)
* add player iframe to bskyweb * iframe for youtube content * update tests * ts errorzio/stable
parent
a9ab13e5a9
commit
856f80fc6d
|
@ -462,45 +462,38 @@ describe('parseEmbedPlayerFromUrl', () => {
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_short',
|
type: 'youtube_short',
|
||||||
source: 'youtubeShorts',
|
source: 'youtubeShorts',
|
||||||
hideDetails: true,
|
hideDetails: true,
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
source: 'youtube',
|
||||||
playerUri:
|
playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
|
||||||
'https://www.youtube.com/embed/videoId?autoplay=1&playsinline=1&start=0',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
undefined,
|
undefined,
|
||||||
|
@ -759,8 +752,6 @@ describe('parseEmbedPlayerFromUrl', () => {
|
||||||
|
|
||||||
const res = parseEmbedPlayerFromUrl(input)
|
const res = parseEmbedPlayerFromUrl(input)
|
||||||
|
|
||||||
console.log(input)
|
|
||||||
|
|
||||||
expect(res).toEqual(output)
|
expect(res).toEqual(output)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -159,6 +159,7 @@ func serve(cctx *cli.Context) error {
|
||||||
e.GET("/security.txt", func(c echo.Context) error {
|
e.GET("/security.txt", func(c echo.Context) error {
|
||||||
return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt")
|
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 {
|
e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
|
||||||
return func(c echo.Context) error {
|
return func(c echo.Context) error {
|
||||||
path := c.Request().URL.Path
|
path := c.Request().URL.Path
|
||||||
|
|
|
@ -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>
|
|
@ -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')
|
const {height: SCREEN_HEIGHT} = Dimensions.get('window')
|
||||||
|
|
||||||
export const embedPlayerSources = [
|
export const embedPlayerSources = [
|
||||||
|
@ -73,7 +74,7 @@ export function parseEmbedPlayerFromUrl(
|
||||||
return {
|
return {
|
||||||
type: 'youtube_video',
|
type: 'youtube_video',
|
||||||
source: 'youtube',
|
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',
|
type: page === 'shorts' ? 'youtube_short' : 'youtube_video',
|
||||||
source: page === 'shorts' ? 'youtubeShorts' : 'youtube',
|
source: page === 'shorts' ? 'youtubeShorts' : 'youtube',
|
||||||
hideDetails: page === 'shorts' ? true : undefined,
|
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 === 'www.twitch.tv' ||
|
||||||
urlp.hostname === 'm.twitch.tv'
|
urlp.hostname === 'm.twitch.tv'
|
||||||
) {
|
) {
|
||||||
const parent =
|
const parent = isWeb
|
||||||
Platform.OS === 'web' ? window.location.hostname : 'localhost'
|
? // @ts-ignore only for web
|
||||||
|
window.location.hostname
|
||||||
|
: 'localhost'
|
||||||
|
|
||||||
const [_, channelOrVideo, clipOrId, id] = urlp.pathname.split('/')
|
const [_, channelOrVideo, clipOrId, id] = urlp.pathname.split('/')
|
||||||
|
|
||||||
|
|
|
@ -78,9 +78,13 @@ function Player({
|
||||||
onLoad: () => void
|
onLoad: () => void
|
||||||
}) {
|
}) {
|
||||||
// ensures we only load what's requested
|
// 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(
|
const onShouldStartLoadWithRequest = React.useCallback(
|
||||||
(event: ShouldStartLoadRequest) => event.url === params.playerUri,
|
(event: ShouldStartLoadRequest) =>
|
||||||
[params.playerUri],
|
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
|
// Don't show the player until it is active
|
||||||
|
|
Loading…
Reference in New Issue