This commit is contained in:
mattyatea 2024-05-16 06:51:50 +09:00
parent a6e8743071
commit c0480ac26d
3 changed files with 96 additions and 57 deletions

View file

@ -20,6 +20,7 @@
"@discordapp/twemoji": "15.0.3",
"@github/webauthn-json": "2.1.1",
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
"@meersagor/wavesurfer-vue": "^0.1.0",
"@misskey-dev/browser-image-resizer": "2024.1.0",
"@rollup/plugin-json": "6.1.0",
"@rollup/plugin-replace": "5.0.5",
@ -73,7 +74,8 @@
"v-code-diff": "1.11.0",
"vite": "5.2.11",
"vue": "3.4.26",
"vuedraggable": "next"
"vuedraggable": "next",
"wavesurfer.js": "^7.7.14"
},
"devDependencies": {
"@misskey-dev/eslint-plugin": "1.0.0",

View file

@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div
:id="(audio.url).slice(32).replace('-','')"
ref="playerEl"
v-hotkey="keymap"
tabindex="0"
@ -29,9 +30,9 @@ SPDX-License-Identifier: AGPL-3.0-only
preload="metadata"
controls
:class="$style.nativeAudio"
:src="audio.url"
@keydown.prevent
>
<source :src="audio.url">
</audio>
</div>
@ -39,8 +40,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<audio
ref="audioEl"
preload="metadata"
:src="audio.url"
>
<source :src="audio.url">
</audio>
<div :class="[$style.controlsChild, $style.controlsLeft]">
<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
@ -64,10 +65,25 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="$style.volumeSeekbar"
/>
</div>
<WaveSurferPlayer
v-if="!defaultStore.state.dataSaver.media && audioEl"
:class="$style.seekbarRoot"
:options="{ media: audioEl,
height: 32,
waveColor: 'gray',
progressColor: accent,
barGap: 3,
barWidth: 3,
barRadius: 5,
duration: 80,
cursorWidth: 0,
}"
></WaveSurferPlayer>
<MkMediaRange
v-if="defaultStore.state.dataSaver.media && !hide"
v-model="rangePercent"
:class="$style.seekbarRoot"
:buffer="bufferedDataRatio"
/>
</div>
</div>
@ -76,6 +92,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import { WaveSurferPlayer } from '@meersagor/wavesurfer-vue';
import tinycolor from 'tinycolor2';
import type { MenuItem } from '@/types/menu.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
@ -84,11 +102,9 @@ import bytes from '@/filters/bytes.js';
import { hms } from '@/filters/hms.js';
import MkMediaRange from '@/components/MkMediaRange.vue';
import { $i, iAmModerator } from '@/account.js';
const props = defineProps<{
audio: Misskey.entities.DriveFile;
}>();
const keymap = {
'up': () => {
if (hasFocus() && audioEl.value) {
@ -131,6 +147,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.data
// Menu
const menuShowing = ref(false);
const accent = ref();
function showMenu(ev: MouseEvent) {
let menu: MenuItem[] = [];
@ -226,10 +243,6 @@ const volume = ref(.25);
const speed = ref(1);
const loop = ref(false); // TODO:
const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => {
if (!audioEl.value) return 0;
return bufferedEnd.value / audioEl.value.duration;
});
// MediaControl Events
function togglePlayPause() {
@ -325,7 +338,9 @@ watch(loop, (to) => {
if (audioEl.value) audioEl.value.loop = to;
});
onMounted(() => {
onMounted(async () => {
accent.value = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
init();
});

View file

@ -697,6 +697,9 @@ importers:
'@mcaptcha/vanilla-glue':
specifier: 0.1.0-alpha-3
version: 0.1.0-alpha-3
'@meersagor/wavesurfer-vue':
specifier: ^0.1.0
version: 0.1.0(typescript@5.4.5)
'@misskey-dev/browser-image-resizer':
specifier: 2024.1.0
version: 2024.1.0
@ -859,6 +862,9 @@ importers:
vuedraggable:
specifier: next
version: 4.1.0(vue@3.4.26(typescript@5.4.5))
wavesurfer.js:
specifier: ^7.7.14
version: 7.7.14
devDependencies:
'@misskey-dev/eslint-plugin':
specifier: 1.0.0
@ -3042,6 +3048,9 @@ packages:
'@types/react': '>=16'
react: '>=16'
'@meersagor/wavesurfer-vue@0.1.0':
resolution: {integrity: sha512-DjOkssn3IgUxNLFlT4X9jpgxdTo+ykSHV762vwfJjRfKwaIna0cEUmOGpKDNDESP4XEHZKuWgrFWp2iEzPkGww==}
'@microsoft/api-extractor-model@7.28.14':
resolution: {integrity: sha512-Bery/c8A8SsKPSvA82cTTuy/+OcxZbLRmKhPkk91/AJOQzxZsShcrmHFAGeiEqSIrv1nPZ3tKq9kfMLdCHmsqg==}
@ -10873,6 +10882,9 @@ packages:
vue-component-type-helpers@2.0.16:
resolution: {integrity: sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==}
vue-component-type-helpers@2.0.18:
resolution: {integrity: sha512-zi1QaDBhSb3oeHJh55aTCrosFNKEQsOL9j3XCAjpF9dwxDUUtd85RkJVzO+YpJqy1LNoCWLU8gwuZ7HW2iDN/A==}
vue-demi@0.14.7:
resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
engines: {node: '>=12'}
@ -10944,6 +10956,9 @@ packages:
resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
engines: {node: '>=10.13.0'}
wavesurfer.js@7.7.14:
resolution: {integrity: sha512-sbd48yHnOVDEbZwsnD3dWzBj4SF2q2rsPysmPE8spoR2XwKVkU/POtZg/L0wPi6ypqXb7brQLftSeOovJNToPQ==}
wcwidth@1.0.1:
resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
@ -11659,7 +11674,7 @@ snapshots:
'@babel/traverse': 7.23.5
'@babel/types': 7.23.5
convert-source-map: 2.0.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
gensync: 1.0.0-beta.2
json5: 2.2.3
semver: 6.3.1
@ -11679,7 +11694,7 @@ snapshots:
'@babel/traverse': 7.24.0
'@babel/types': 7.24.0
convert-source-map: 2.0.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
gensync: 1.0.0-beta.2
json5: 2.2.3
semver: 6.3.1
@ -11749,7 +11764,7 @@ snapshots:
'@babel/core': 7.24.0
'@babel/helper-compilation-targets': 7.23.6
'@babel/helper-plugin-utils': 7.22.5
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
lodash.debounce: 4.0.8
resolve: 1.22.8
transitivePeerDependencies:
@ -12520,7 +12535,7 @@ snapshots:
'@babel/helper-split-export-declaration': 7.22.6
'@babel/parser': 7.23.9
'@babel/types': 7.23.5
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
globals: 11.12.0
transitivePeerDependencies:
- supports-color
@ -12535,7 +12550,7 @@ snapshots:
'@babel/helper-split-export-declaration': 7.22.6
'@babel/parser': 7.24.0
'@babel/types': 7.24.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
globals: 11.12.0
transitivePeerDependencies:
- supports-color
@ -12927,7 +12942,7 @@ snapshots:
'@eslint/eslintrc@2.1.4':
dependencies:
ajv: 6.12.6
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
espree: 9.6.1
globals: 13.19.0
ignore: 5.2.4
@ -13078,7 +13093,7 @@ snapshots:
'@humanwhocodes/config-array@0.11.13':
dependencies:
'@humanwhocodes/object-schema': 2.0.1
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
minimatch: 3.1.2
transitivePeerDependencies:
- supports-color
@ -13086,7 +13101,7 @@ snapshots:
'@humanwhocodes/config-array@0.11.14':
dependencies:
'@humanwhocodes/object-schema': 2.0.2
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
minimatch: 3.1.2
transitivePeerDependencies:
- supports-color
@ -13470,6 +13485,13 @@ snapshots:
'@types/react': 18.0.28
react: 18.3.1
'@meersagor/wavesurfer-vue@0.1.0(typescript@5.4.5)':
dependencies:
vue: 3.4.26(typescript@5.4.5)
wavesurfer.js: 7.7.14
transitivePeerDependencies:
- typescript
'@microsoft/api-extractor-model@7.28.14(@types/node@20.12.7)':
dependencies:
'@microsoft/tsdoc': 0.14.2
@ -14954,7 +14976,7 @@ snapshots:
ts-dedent: 2.2.0
type-fest: 2.19.0
vue: 3.4.26(typescript@5.4.5)
vue-component-type-helpers: 2.0.16
vue-component-type-helpers: 2.0.18
transitivePeerDependencies:
- encoding
- supports-color
@ -15617,7 +15639,7 @@ snapshots:
'@typescript-eslint/type-utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3)
'@typescript-eslint/utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.11.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.53.0
graphemer: 1.4.0
ignore: 5.2.4
@ -15637,7 +15659,7 @@ snapshots:
'@typescript-eslint/type-utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
'@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
graphemer: 1.4.0
ignore: 5.2.4
@ -15657,7 +15679,7 @@ snapshots:
'@typescript-eslint/type-utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
'@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
'@typescript-eslint/visitor-keys': 7.7.1
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
graphemer: 1.4.0
ignore: 5.3.1
@ -15675,7 +15697,7 @@ snapshots:
'@typescript-eslint/types': 6.11.0
'@typescript-eslint/typescript-estree': 6.11.0(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 6.11.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.53.0
optionalDependencies:
typescript: 5.3.3
@ -15688,7 +15710,7 @@ snapshots:
'@typescript-eslint/types': 7.1.0
'@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
'@typescript-eslint/visitor-keys': 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
optionalDependencies:
typescript: 5.3.3
@ -15701,7 +15723,7 @@ snapshots:
'@typescript-eslint/types': 7.7.1
'@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
'@typescript-eslint/visitor-keys': 7.7.1
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
optionalDependencies:
typescript: 5.4.5
@ -15727,7 +15749,7 @@ snapshots:
dependencies:
'@typescript-eslint/typescript-estree': 6.11.0(typescript@5.3.3)
'@typescript-eslint/utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3)
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.53.0
ts-api-utils: 1.0.1(typescript@5.3.3)
optionalDependencies:
@ -15739,7 +15761,7 @@ snapshots:
dependencies:
'@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
'@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
ts-api-utils: 1.0.1(typescript@5.3.3)
optionalDependencies:
@ -15751,7 +15773,7 @@ snapshots:
dependencies:
'@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
'@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
ts-api-utils: 1.3.0(typescript@5.4.5)
optionalDependencies:
@ -15769,7 +15791,7 @@ snapshots:
dependencies:
'@typescript-eslint/types': 6.11.0
'@typescript-eslint/visitor-keys': 6.11.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
globby: 11.1.0
is-glob: 4.0.3
semver: 7.5.4
@ -15783,7 +15805,7 @@ snapshots:
dependencies:
'@typescript-eslint/types': 7.1.0
'@typescript-eslint/visitor-keys': 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
globby: 11.1.0
is-glob: 4.0.3
minimatch: 9.0.3
@ -15798,7 +15820,7 @@ snapshots:
dependencies:
'@typescript-eslint/types': 7.7.1
'@typescript-eslint/visitor-keys': 7.7.1
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
globby: 11.1.0
is-glob: 4.0.3
minimatch: 9.0.4
@ -16124,13 +16146,13 @@ snapshots:
agent-base@6.0.2:
dependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
agent-base@7.1.0:
dependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -16360,7 +16382,7 @@ snapshots:
dependencies:
'@fastify/error': 3.4.0
archy: 1.0.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
fastq: 1.17.1
transitivePeerDependencies:
- supports-color
@ -17468,7 +17490,7 @@ snapshots:
detect-port@1.5.1:
dependencies:
address: 1.2.2
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -17684,7 +17706,7 @@ snapshots:
esbuild-register@3.5.0(esbuild@0.20.2):
dependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
esbuild: 0.20.2
transitivePeerDependencies:
- supports-color
@ -17954,7 +17976,7 @@ snapshots:
ajv: 6.12.6
chalk: 4.1.2
cross-spawn: 7.0.3
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
doctrine: 3.0.0
escape-string-regexp: 4.0.0
eslint-scope: 7.2.2
@ -17997,7 +18019,7 @@ snapshots:
ajv: 6.12.6
chalk: 4.1.2
cross-spawn: 7.0.3
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
doctrine: 3.0.0
escape-string-regexp: 4.0.0
eslint-scope: 7.2.2
@ -18459,7 +18481,7 @@ snapshots:
follow-redirects@1.15.2(debug@4.3.4):
optionalDependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
for-each@0.3.3:
dependencies:
@ -18911,7 +18933,7 @@ snapshots:
http-proxy-agent@7.0.0:
dependencies:
agent-base: 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -18950,14 +18972,14 @@ snapshots:
https-proxy-agent@5.0.1:
dependencies:
agent-base: 6.0.2
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
https-proxy-agent@7.0.2:
dependencies:
agent-base: 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -19038,7 +19060,7 @@ snapshots:
dependencies:
'@ioredis/commands': 1.2.0
cluster-key-slot: 1.1.2
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
denque: 2.1.0
lodash.defaults: 4.2.0
lodash.isarguments: 3.1.0
@ -19291,7 +19313,7 @@ snapshots:
istanbul-lib-source-maps@4.0.1:
dependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
istanbul-lib-coverage: 3.2.2
source-map: 0.6.1
transitivePeerDependencies:
@ -20355,7 +20377,7 @@ snapshots:
micromark@4.0.0:
dependencies:
'@types/debug': 4.1.12
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
decode-named-character-reference: 1.0.2
devlop: 1.1.0
micromark-core-commonmark: 2.0.0
@ -21470,10 +21492,6 @@ snapshots:
forwarded: 0.2.0
ipaddr.js: 1.9.1
proxycheck-ts@0.0.9:
dependencies:
cross-fetch: 4.0.0
proxy-from-env@1.0.0: {}
proxy-from-env@1.1.0: {}
@ -22191,7 +22209,7 @@ snapshots:
dependencies:
'@hapi/hoek': 10.0.1
'@hapi/wreck': 18.0.1
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
joi: 17.11.0
transitivePeerDependencies:
- supports-color
@ -22289,7 +22307,7 @@ snapshots:
socks-proxy-agent@8.0.2:
dependencies:
agent-base: 7.1.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
socks: 2.7.1
transitivePeerDependencies:
- supports-color
@ -22386,7 +22404,7 @@ snapshots:
arg: 5.0.2
bluebird: 3.7.2
check-more-types: 2.24.0
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
execa: 5.1.1
lazy-ass: 1.6.0
ps-tree: 1.2.0
@ -22899,7 +22917,7 @@ snapshots:
chalk: 4.1.2
cli-highlight: 2.1.11
dayjs: 1.11.10
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
dotenv: 16.0.3
glob: 10.3.10
mkdirp: 2.1.6
@ -23109,7 +23127,7 @@ snapshots:
vite-node@0.34.6(@types/node@20.12.7)(sass@1.76.0)(terser@5.30.3):
dependencies:
cac: 6.7.14
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
mlly: 1.5.0
pathe: 1.1.2
picocolors: 1.0.0
@ -23158,7 +23176,7 @@ snapshots:
acorn-walk: 8.3.2
cac: 6.7.14
chai: 4.3.10
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
local-pkg: 0.4.3
magic-string: 0.30.7
pathe: 1.1.2
@ -23218,6 +23236,8 @@ snapshots:
vue-component-type-helpers@2.0.16: {}
vue-component-type-helpers@2.0.18: {}
vue-demi@0.14.7(vue@3.4.26(typescript@5.4.5)):
dependencies:
vue: 3.4.26(typescript@5.4.5)
@ -23239,7 +23259,7 @@ snapshots:
vue-eslint-parser@9.4.2(eslint@8.57.0):
dependencies:
debug: 4.3.4(supports-color@8.1.1)
debug: 4.3.4(supports-color@5.5.0)
eslint: 8.57.0
eslint-scope: 7.2.2
eslint-visitor-keys: 3.4.3
@ -23311,6 +23331,8 @@ snapshots:
glob-to-regexp: 0.4.1
graceful-fs: 4.2.11
wavesurfer.js@7.7.14: {}
wcwidth@1.0.1:
dependencies:
defaults: 1.0.4