diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 1175ce2e1e..84f3d9ce63 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -72,7 +72,6 @@
"vanilla-tilt": "1.8.0",
"vite": "4.3.9",
"vue": "3.3.4",
- "vue-plyr": "7.0.0",
"vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "next"
},
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index 5ca4c50518..5902d6fd25 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -1,27 +1,27 @@
<template>
-<div class="mk-media-banner">
- <div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
- <span class="icon"><i class="ti ti-alert-triangle"></i></span>
+<div :class="$style.root">
+ <div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
+ <span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
<b>{{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
- <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
- <VuePlyr :options="{ volume: 0.5 }">
- <audio controls preload="metadata">
- <source
- :src="media.url"
- :type="media.type"
- />
- </audio>
- </VuePlyr>
+ <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :class="$style.audio">
+ <audio
+ ref="audioEl"
+ :src="media.url"
+ :title="media.name"
+ controls
+ preload="metadata"
+ @volumechange="volumechange"
+ />
</div>
<a
- v-else class="download"
+ v-else :class="$style.download"
:href="media.url"
:title="media.name"
:download="media.name"
>
- <span class="icon"><i class="ti ti-download"></i></span>
+ <span style="font-size: 1.6em;"><i class="ti ti-download"></i></span>
<b>{{ media.name }}</b>
</a>
</div>
@@ -30,9 +30,7 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as misskey from 'misskey-js';
-import VuePlyr from 'vue-plyr';
import { soundConfigStore } from '@/scripts/sound';
-import 'vue-plyr/dist/vue-plyr.css';
import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{
@@ -52,55 +50,34 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.mk-media-banner {
+<style lang="scss" module>
+.root {
width: 100%;
border-radius: 4px;
margin-top: 4px;
- // overflow: clip;
+ overflow: clip;
+}
- --plyr-color-main: var(--accent);
- --plyr-audio-controls-background: var(--bg);
- --plyr-audio-controls-color: var(--accentLighten);
+.download,
+.sensitive {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ padding: 8px 12px;
+ white-space: nowrap;
+}
- > .download,
- > .sensitive {
- display: flex;
- align-items: center;
- font-size: 12px;
- padding: 8px 12px;
- white-space: nowrap;
+.download {
+ background: var(--noteAttachedFile);
+}
- > * {
- display: block;
- }
+.sensitive {
+ background: #111;
+ color: #fff;
+}
- > b {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- > *:not(:last-child) {
- margin-right: .2em;
- }
-
- > .icon {
- font-size: 1.6em;
- }
- }
-
- > .download {
- background: var(--noteAttachedFile);
- }
-
- > .sensitive {
- background: #111;
- color: #fff;
- }
-
- > .audio {
- border-radius: 8px;
- // overflow: clip;
- }
+.audio {
+ border-radius: 8px;
+ overflow: clip;
}
</style>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index e2c1bed785..40bae90b5e 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -1,36 +1,36 @@
<template>
-<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
+<div v-if="hide" :class="$style.hidden" @click="hide = false">
<!-- 【注意】dataSaverMode が有効になっている際には、hide が false になるまでサムネイルや動画を読み込まないようにすること -->
- <div>
- <b v-if="video.isSensitive"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
- <b v-else><i class="ti ti-movie"></i> {{ defaultStore.state.enableDataSaverMode && video.size ? bytes(video.size) : i18n.ts.video }}</b>
+ <div :class="$style.sensitive">
+ <b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
+ <b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.enableDataSaverMode && video.size ? bytes(video.size) : i18n.ts.video }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
</div>
-<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
- <VuePlyr :options="{ volume: 0.5 }">
- <video
- controls
- :data-poster="video.thumbnailUrl"
+<div v-else :class="$style.visible">
+ <video
+ :class="$style.video"
+ :poster="video.thumbnailUrl"
+ :title="video.comment"
+ :alt="video.comment"
+ preload="none"
+ controls
+ @contextmenu.stop
+ >
+ <source
+ :src="video.url"
+ :type="video.type"
>
- <source
- size="720"
- :src="video.url"
- :type="video.type"
- />
- </video>
- </VuePlyr>
- <i class="ti ti-eye-off" @click="hide = true"></i>
+ </video>
+ <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as misskey from 'misskey-js';
-import VuePlyr from 'vue-plyr';
import bytes from '@/filters/bytes';
import { defaultStore } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
import { i18n } from '@/i18n';
const props = defineProps<{
@@ -40,56 +40,49 @@ const props = defineProps<{
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
</script>
-<style lang="scss" scoped>
-.kkjnbbplepmiyuadieoenjgutgcmtsvu {
+<style lang="scss" module>
+.visible {
position: relative;
-
- --plyr-color-main: var(--accent);
-
- > i {
- display: block;
- position: absolute;
- border-radius: 6px;
- background-color: var(--fg);
- color: var(--accentLighten);
- font-size: 14px;
- opacity: .5;
- padding: 3px 6px;
- text-align: center;
- cursor: pointer;
- top: 12px;
- right: 12px;
- }
-
- > video {
- display: flex;
- justify-content: center;
- align-items: center;
-
- font-size: 3.5em;
- overflow: hidden;
- background-position: center;
- background-size: cover;
- width: 100%;
- height: 100%;
- }
}
-.icozogqfvdetwohsdglrbswgrejoxbdj {
+.hide {
+ display: block;
+ position: absolute;
+ border-radius: 6px;
+ background-color: var(--fg);
+ color: var(--accentLighten);
+ font-size: 14px;
+ opacity: .5;
+ padding: 3px 6px;
+ text-align: center;
+ cursor: pointer;
+ top: 12px;
+ right: 12px;
+}
+
+.video {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 3.5em;
+ overflow: hidden;
+ background-position: center;
+ background-size: cover;
+ width: 100%;
+ height: 100%;
+}
+
+.hidden {
display: flex;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
+}
- > div {
- display: table-cell;
- text-align: center;
- font-size: 12px;
-
- > b {
- display: block;
- }
- }
+.sensitive {
+ display: table-cell;
+ text-align: center;
+ font-size: 12px;
}
</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd565cd33b..4a1219a74b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -805,9 +805,6 @@ importers:
vue:
specifier: 3.3.4
version: 3.3.4
- vue-plyr:
- specifier: 7.0.0
- version: 7.0.0
vue-prism-editor:
specifier: 2.0.0-alpha.2
version: 2.0.0-alpha.2(vue@3.3.4)
@@ -5538,7 +5535,7 @@ packages:
ts-dedent: 2.2.0
util-deprecate: 1.0.2
watchpack: 2.4.0
- ws: 8.13.0(bufferutil@4.0.7)(utf-8-validate@6.0.3)
+ ws: 8.13.0
transitivePeerDependencies:
- bufferutil
- encoding
@@ -7448,14 +7445,6 @@ packages:
'@vue/compiler-core': 3.3.4
'@vue/shared': 3.3.4
- /@vue/compiler-sfc@2.7.14:
- resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
- dependencies:
- '@babel/parser': 7.21.9
- postcss: 8.4.23
- source-map: 0.6.1
- dev: false
-
/@vue/compiler-sfc@3.3.4:
resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
dependencies:
@@ -8713,6 +8702,7 @@ packages:
requiresBuild: true
dependencies:
node-gyp-build: 4.6.0
+ dev: false
/bullmq@3.14.1:
resolution: {integrity: sha512-Fom78UKljYsnJmwbROVPx3eFLuVfQjQbw9KCnVupLzT31RQHhFHV2xd/4J4oWl4u34bZ1JmEUfNnqNBz+IOJuA==}
@@ -9753,10 +9743,6 @@ packages:
/csstype@3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
- /custom-event-polyfill@1.0.7:
- resolution: {integrity: sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==}
- dev: false
-
/cwise-compiler@1.1.3:
resolution: {integrity: sha512-WXlK/m+Di8DMMcCjcWr4i+XzcQra9eCdXIJrgh4TUgh0pIS/yJduLxS9JgefsHJ/YVLdgPtXm9r62W92MvanEQ==}
dependencies:
@@ -10352,10 +10338,6 @@ packages:
resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
dev: false
- /entities@4.4.0:
- resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
- engines: {node: '>=0.12'}
-
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
@@ -14288,10 +14270,6 @@ packages:
strip-bom: 2.0.0
dev: false
- /loadjs@4.2.0:
- resolution: {integrity: sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==}
- dev: false
-
/local-pkg@0.4.3:
resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
engines: {node: '>=14'}
@@ -15281,6 +15259,7 @@ packages:
/node-gyp-build@4.6.0:
resolution: {integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==}
hasBin: true
+ dev: false
/node-gyp@9.3.1:
resolution: {integrity: sha512-4Q16ZCqq3g8awk6UplT7AuxQ35XN4R/yf/+wSAwcBUAjg7l58RTactWaP8fIDTi0FzI7YcVLujwExakZlfWkXg==}
@@ -15903,7 +15882,7 @@ packages:
/parse5@7.1.2:
resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
dependencies:
- entities: 4.4.0
+ entities: 4.5.0
/parseurl@1.3.3:
resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
@@ -17001,10 +16980,6 @@ packages:
resolution: {integrity: sha512-9CRCUX/w4+fNMzlYgA8GeJz7BZwBPwaGm3FhAm9Hi50k8wNy2CyiJQa8awygWJay87uVVCV0/FwbLcD6+/A9KQ==}
dev: false
- /rangetouch@2.0.1:
- resolution: {integrity: sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==}
- dev: false
-
/ratelimiter@3.4.1:
resolution: {integrity: sha512-5FJbRW/Jkkdk29ksedAfWFkQkhbUrMx3QJGwMKAypeIiQf4yrLW+gtPKZiaWt4zPrtw1uGufOjGO7UGM6VllsQ==}
dev: false
@@ -19676,10 +19651,6 @@ packages:
requires-port: 1.0.0
dev: false
- /url-polyfill@1.1.12:
- resolution: {integrity: sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==}
- dev: false
-
/urlsafe-base64@1.0.0:
resolution: {integrity: sha512-RtuPeMy7c1UrHwproMZN9gN6kiZ0SvJwRaEzwZY0j9MypEkFqyBaKv176jvlPtg58Zh36bOkS0NFABXMHvvGCA==}
dev: false
@@ -19705,6 +19676,7 @@ packages:
requiresBuild: true
dependencies:
node-gyp-build: 4.6.0
+ dev: false
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -20031,13 +20003,6 @@ packages:
vue: 3.3.4
dev: true
- /vue-plyr@7.0.0:
- resolution: {integrity: sha512-NvbO/ZzV1IxlBQQbQlon5Sk8hKuGAj3k4k0XVdi7gM4oSqu8mZMhJ3WM3FfAtNfV790jbLnb8P3dHYqaBqIv6g==}
- dependencies:
- plyr: github.com/sampotts/plyr/d434c9af16e641400aaee93188594208d88f2658
- vue: 2.7.14
- dev: false
-
/vue-prism-editor@2.0.0-alpha.2(vue@3.3.4):
resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
engines: {node: '>=10'}
@@ -20066,13 +20031,6 @@ packages:
typescript: 5.0.4
dev: true
- /vue@2.7.14:
- resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
- dependencies:
- '@vue/compiler-sfc': 2.7.14
- csstype: 3.1.1
- dev: false
-
/vue@3.3.4:
resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
dependencies:
@@ -20368,6 +20326,19 @@ packages:
async-limiter: 1.0.1
dev: true
+ /ws@8.13.0:
+ resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+ engines: {node: '>=10.0.0'}
+ peerDependencies:
+ bufferutil: ^4.0.1
+ utf-8-validate: '>=5.0.2'
+ peerDependenciesMeta:
+ bufferutil:
+ optional: true
+ utf-8-validate:
+ optional: true
+ dev: true
+
/ws@8.13.0(bufferutil@4.0.7)(utf-8-validate@6.0.3):
resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
engines: {node: '>=10.0.0'}
@@ -20382,6 +20353,7 @@ packages:
dependencies:
bufferutil: 4.0.7
utf-8-validate: 6.0.3
+ dev: false
/xev@3.0.2:
resolution: {integrity: sha512-8kxuH95iMXzHZj+fwqfA4UrPcYOy6bGIgfWzo9Ji23JoEc30ge/Z++Ubkiuy8c0+M64nXmmxrmJ7C8wnuBhluw==}
@@ -20646,15 +20618,3 @@ packages:
jschardet: 3.0.0
private-ip: 2.3.3
trace-redirect: 1.0.6
-
- github.com/sampotts/plyr/d434c9af16e641400aaee93188594208d88f2658:
- resolution: {tarball: https://codeload.github.com/sampotts/plyr/tar.gz/d434c9af16e641400aaee93188594208d88f2658}
- name: plyr
- version: 3.7.0
- dependencies:
- core-js: 3.29.1
- custom-event-polyfill: 1.0.7
- loadjs: 4.2.0
- rangetouch: 2.0.1
- url-polyfill: 1.1.12
- dev: false