Add download button to Plyr (co-authored by @nullobsi)

This commit is contained in:
ThatOneCalculator 2022-09-21 13:10:47 -07:00
parent a075813d30
commit a262e1353f
4 changed files with 50 additions and 14 deletions

View File

@ -1,6 +1,6 @@
{
"name": "calckey",
"version": "12.119.0-calc.1-rc.8",
"version": "12.119.0-calc.1-rc.9",
"codename": "aqua",
"repository": {
"type": "git",

View File

@ -6,17 +6,36 @@
<span>{{ $ts.clickToShow }}</span>
</div>
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<VuePlyr>
<audio ref="audioEl"
<VuePlyr
:options="{
controls: [
'play-large',
'restart',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'settings',
'download',
],
disableContextMenu: false,
}"
>
<audio
ref="audioEl"
class="audio"
:src="media.url"
:title="media.name"
controls
preload="metadata"
@volumechange="volumechange" />
@volumechange="volumechange"
/>
</VuePlyr>
</div>
<a v-else class="download"
<a
v-else class="download"
:href="media.url"
:title="media.name"
:download="media.name"
@ -29,8 +48,8 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
import VuePlyr from 'vue-plyr';
import type * as misskey from 'misskey-js';
import { ColdDeviceStorage } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';

View File

@ -6,12 +6,29 @@
</div>
</div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<VuePlyr>
<VuePlyr
:options="{
controls: [
'play-large',
'restart',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'settings',
'pip',
'download',
'fullscreen'
],
disableContextMenu: false,
}"
>
<video
:poster="video.thumbnailUrl"
:title="video.comment"
:alt="video.comment"
:download="video.url"
:aria-label="video.comment"
preload="none"
controls
@contextmenu.stop
@ -28,8 +45,8 @@
<script lang="ts" setup>
import { ref } from 'vue';
import * as misskey from 'misskey-js';
import VuePlyr from 'vue-plyr';
import type * as misskey from 'misskey-js';
import { defaultStore } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';

View File

@ -2,14 +2,14 @@
<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content">
<div class="balloon" :class="{ noText: message.text == null }" >
<div class="balloon" :class="{ noText: message.text == null }">
<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
<img src="/client-assets/remove.png" alt="Delete"/>
</button>
<div v-if="!message.isDeleted" class="content">
<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
<div v-if="message.file" class="file">
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name" max-width="400"/>
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
<VuePlyr v-else-if="message.file.type.split('/')[0] == 'video'">
<video
:alt="message.file.name"
@ -51,9 +51,9 @@
<script lang="ts" setup>
import { } from 'vue';
import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
import XImage from '@/components/MkMediaImage.vue';
import VuePlyr from 'vue-plyr';
import type * as Misskey from 'misskey-js';
import XImage from '@/components/MkMediaImage.vue';
import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import * as os from '@/os';