sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: player fill window

Browse Source
This commit is contained in:
こけっち 2022-09-16 19:37:13 +09:00
parent 98a768c28f
commit 177ee5645e
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/components/MkPageWindow.vue
View File

@ -141,4 +141,7 @@ defineExpose({
min-height: 100%; min-height: 100%;
background: var(--bg); background: var(--bg);
} }
.yrolvcoq:has(.fill) {
height: 100%;
}
</style> </style>

12
packages/client/src/pages/ytplayer.vue
View File

@ -1,15 +1,13 @@
<template> <template>
<MkStickyContainer> <div class="poamfof fill">
<div class="poamfof">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="player.url" class="player"> <div v-if="player.url" class="player">
<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="'100%'" :heigth="player.height || 500" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/> <iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
</div> </div>
</transition> </transition>
<MkLoading v-if="fetching" /> <MkLoading v-if="fetching" />
<MkError v-else-if="!player.url" @retry="fetch()" /> <MkError v-else-if="!player.url" @retry="fetch()" />
</div> </div>
</MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -62,11 +60,15 @@ console.log(await player.url);
</script> </script>
<style lang="scss"> <style lang="scss">
.fill {
height: 100%;
}
.player { .player {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%;
>iframe { >iframe {
height: 500px; height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;