diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-08 17:05:36 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-08 17:05:36 +0900 |
| commit | 2e565cac2cf502d4a2c13c706825d641912e69b7 (patch) | |
| tree | 175d3022d66204d6e6532b42c7cf39de25f78a17 /packages | |
| parent | enhance(client): tweak medialist style (diff) | |
| download | sharkey-2e565cac2cf502d4a2c13c706825d641912e69b7.tar.gz sharkey-2e565cac2cf502d4a2c13c706825d641912e69b7.tar.bz2 sharkey-2e565cac2cf502d4a2c13c706825d641912e69b7.zip | |
enhance(client): use VuePlyr
Close #9797
Co-Authored-By: Rox Squires <rox@roxsquires.gay>
Diffstat (limited to 'packages')
| -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> |