danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Refactor: update video player to account for video height and width

Browse source
This commit is contained in:
arabcoders 2025-11-12 18:48:33 +03:00
parent 70ff5e79c5
commit b0c9db2d7d
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ui/app/components/VideoPlayer.vue
View file

@ -84,8 +84,8 @@
<template>
<div v-if="infoLoaded">
<div style="position: relative;">
<video class="player" ref="video" :poster="uri(thumbnail)" playsinline controls crossorigin="anonymous"
preload="auto" autoplay>
<video class="player" ref="video" :poster="uri(thumbnail)" :width="videoWidth" :height="videoHeight"
playsinline controls crossorigin="anonymous" preload="auto" autoplay>
<source v-for="source in sources" :key="source.src" :src="source.src" @error="source.onerror"
:type="source.type" />
<track v-for="(track, i) in tracks" :key="track.file" :kind="track.kind" :label="track.label"
@ -275,6 +275,8 @@ const artist = ref('')
const title = ref('')
const isAudio = ref(false)
const hasVideoStream = ref(false)
const videoWidth = ref<number | undefined>(undefined)
const videoHeight = ref<number | undefined>(undefined)
const volume = useStorage('player_volume', 1)
const notFirefox = !navigator.userAgent.toLowerCase().includes('firefox')
const infoLoaded = ref(false)
@ -504,6 +506,15 @@ onMounted(async () => {
hasVideoStream.value = Array.isArray(response.ffprobe?.video)
&& response.ffprobe.video.some(s => 'video' === s.codec_type)
// Extract video dimensions to prevent layout reflow
if (hasVideoStream.value && response.ffprobe?.video) {
const videoStream = response.ffprobe.video.find(s => 'video' === s.codec_type)
if (videoStream?.width && videoStream?.height) {
videoWidth.value = videoStream.width
videoHeight.value = videoStream.height
}
}
if (!props.item.extras?.is_video && props.item.extras?.is_audio) {
isAudio.value = true
} else {