Properly fill container for YT Shorts videos (#3238)

account for jest

account for jest

yt iframe fill container
zio/stable
Hailey 2024-03-18 09:09:08 -07:00 committed by GitHub
parent 79175e2a09
commit 88ab83bd52
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 9 deletions

View File

@ -5,16 +5,14 @@
} }
.container { .container {
position: relative; position: relative;
width: 100%; overflow: hidden;
height: 0; width: 100vw;
padding-bottom: 56.25%; height: 100vh;
} }
.video { .video {
position: absolute; position: absolute;
top: 0; width: 100vw;
left: 0; height: 100vh;
width: 100%;
height: 100%;
} }
</style> </style>
<div class="container"><div class="video" id="player"></div></div> <div class="container"><div class="video" id="player"></div></div>

View File

@ -2,6 +2,15 @@ import {Dimensions} from 'react-native'
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
const {height: SCREEN_HEIGHT} = Dimensions.get('window') const {height: SCREEN_HEIGHT} = Dimensions.get('window')
const IFRAME_HOST = isWeb
? // @ts-ignore only for web
window.location.host === 'localhost:8100'
? 'http://localhost:8100'
: 'https://bsky.app'
: __DEV__ && !process.env.JEST_WORKER_ID
? 'http://localhost:8100'
: 'https://bsky.app'
export const embedPlayerSources = [ export const embedPlayerSources = [
'youtube', 'youtube',
'youtubeShorts', 'youtubeShorts',
@ -74,7 +83,7 @@ export function parseEmbedPlayerFromUrl(
return { return {
type: 'youtube_video', type: 'youtube_video',
source: 'youtube', source: 'youtube',
playerUri: `https://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, playerUri: `${IFRAME_HOST}/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
} }
} }
} }
@ -93,7 +102,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://bsky.app/iframe/youtube.html?videoId=${videoId}&start=${seek}`, playerUri: `${IFRAME_HOST}/iframe/youtube.html?videoId=${videoId}&start=${seek}`,
} }
} }
} }