diff options
| -rw-r--r-- | packages/frontend/src/components/MkMediaBanner.vue | 31 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 4 |
2 files changed, 19 insertions, 16 deletions
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index 718ce80e0d..c4af1ee8d0 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -6,15 +6,14 @@ <span>{{ $ts.clickToShow }}</span> </div> <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio"> - <audio - ref="audioEl" - class="audio" - :src="media.url" - :title="media.name" - controls - preload="metadata" - @volumechange="volumechange" - /> + <VuePlyr :options="{ volume: 0.5 }"> + <audio controls preload="metadata"> + <source + :src="media.url" + :type="media.type" + /> + </audio> + </VuePlyr> </div> <a v-else class="download" @@ -31,7 +30,9 @@ <script lang="ts" setup> import { onMounted } from 'vue'; import * as misskey from 'misskey-js'; +import VuePlyr from 'vue-plyr'; import { ColdDeviceStorage } from '@/store'; +import 'vue-plyr/dist/vue-plyr.css'; const props = withDefaults(defineProps<{ media: misskey.entities.DriveFile; @@ -55,7 +56,11 @@ onMounted(() => { width: 100%; border-radius: 4px; margin-top: 4px; - overflow: hidden; + overflow: clip; + + --plyr-color-main: var(--accent); + --plyr-audio-controls-background: var(--bg); + --plyr-audio-controls-color: var(--accentLighten); > .download, > .sensitive { @@ -93,10 +98,8 @@ onMounted(() => { } > .audio { - .audio { - display: block; - width: 100%; - } + border-radius: 8px; + overflow: clip; } } </style> diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 2c24c16f57..979c3eed28 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -6,7 +6,7 @@ </div> </div> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> - <vue-plyr> + <VuePlyr :options="{ volume: 0.5 }"> <video controls :data-poster="video.thumbnailUrl" @@ -17,7 +17,7 @@ :type="video.type" /> </video> - </vue-plyr> + </VuePlyr> <i class="ti ti-eye-off" @click="hide = true"></i> </div> </template> |