laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(client): use VuePlyr

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/components/MkMediaBanner.vue
View File

@ -6,15 +6,14 @@
<span>{{ $ts.clickToShow }}</span> <span>{{ $ts.clickToShow }}</span>
</div> </div>
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio"> <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<audio <VuePlyr :options="{ volume: 0.5 }">
ref="audioEl" <audio controls preload="metadata">
class="audio" <source
:src="media.url" :src="media.url"
:title="media.name" :type="media.type"
controls />
preload="metadata" </audio>
@volumechange="volumechange" </VuePlyr>
/>
</div> </div>
<a <a
v-else class="download" v-else class="download"
@ -31,7 +30,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import VuePlyr from 'vue-plyr';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
media: misskey.entities.DriveFile; media: misskey.entities.DriveFile;
@ -55,7 +56,11 @@ onMounted(() => {
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
margin-top: 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, > .download,
> .sensitive { > .sensitive {
@ -93,10 +98,8 @@ onMounted(() => {
} }
> .audio { > .audio {
.audio { border-radius: 8px;
display: block; overflow: clip;
width: 100%;
}
} }
} }
</style> </style>

4
packages/frontend/src/components/MkMediaVideo.vue
View File

@ -6,7 +6,7 @@
</div> </div>
</div> </div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<vue-plyr> <VuePlyr :options="{ volume: 0.5 }">
<video <video
controls controls
:data-poster="video.thumbnailUrl" :data-poster="video.thumbnailUrl"
@ -17,7 +17,7 @@
:type="video.type" :type="video.type"
/> />
</video> </video>
</vue-plyr> </VuePlyr>
<i class="ti ti-eye-off" @click="hide = true"></i> <i class="ti ti-eye-off" @click="hide = true"></i>
</div> </div>
</template> </template>