enhance(client): use VuePlyr

Close #9797

Co-Authored-By: Rox Squires <rox@roxsquires.gay>
This commit is contained in:
syuilo 2023-02-08 17:05:36 +09:00
parent ac7537278c
commit 2e565cac2c
2 changed files with 19 additions and 16 deletions

View file

@ -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"
<VuePlyr :options="{ volume: 0.5 }">
<audio controls preload="metadata">
<source
:src="media.url"
:title="media.name"
controls
preload="metadata"
@volumechange="volumechange"
: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>

View file

@ -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>