feat: plyr
This commit is contained in:
ThatOneCalculator
parent
e365139961
commit
d0c0c51edf
4 changed files with 70 additions and 5 deletions
|
|
@ -46,6 +46,7 @@
|
|||
"ms": "2.1.3",
|
||||
"nested-property": "4.0.0",
|
||||
"photoswipe": "5.2.8",
|
||||
"plyr": "3.7.2",
|
||||
"prismjs": "1.28.0",
|
||||
"private-ip": "2.3.3",
|
||||
"promise-limit": "2.7.0",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
|
||||
<audio ref="audioEl"
|
||||
class="audio"
|
||||
class="audio plyr"
|
||||
:src="media.url"
|
||||
:title="media.name"
|
||||
controls
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import { Plyr } from 'plyr';
|
||||
import { ColdDeviceStorage } from '@/store';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
|
|
@ -35,6 +36,10 @@ const props = withDefaults(defineProps<{
|
|||
}>(), {
|
||||
});
|
||||
|
||||
new Plyr('.plyr', {
|
||||
settings: ['speed', 'loop'],
|
||||
});
|
||||
|
||||
const audioEl = $ref<HTMLAudioElement | null>();
|
||||
let hide = $ref(true);
|
||||
|
||||
|
|
@ -54,6 +59,13 @@ onMounted(() => {
|
|||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
> .plyr {
|
||||
--plyr-color-main: var(--accent);
|
||||
--plyr-video-background: var(--bg);
|
||||
--plyr-badge-text-color: var(--fg);
|
||||
--plyr-badge-background: var(--accentedBg);
|
||||
}
|
||||
|
||||
> .download,
|
||||
> .sensitive {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@
|
|||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:alt="video.comment"
|
||||
class="plyr"
|
||||
preload="none"
|
||||
controls
|
||||
playsinline
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="video.url"
|
||||
<source
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
>
|
||||
</video>
|
||||
|
|
@ -26,12 +28,19 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import { Plyr } from 'plyr';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
video: misskey.entities.DriveFile;
|
||||
}>();
|
||||
|
||||
new Plyr('.plyr', {
|
||||
settings: ['speed', 'loop'],
|
||||
title: props.video.comment,
|
||||
});
|
||||
|
||||
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
|
||||
</script>
|
||||
|
||||
|
|
@ -39,6 +48,13 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
||||
position: relative;
|
||||
|
||||
> .plyr {
|
||||
--plyr-color-main: var(--accent);
|
||||
--plyr-video-background: var(--bg);
|
||||
--plyr-badge-text-color: var(--fg);
|
||||
--plyr-badge-background: var(--accentedBg);
|
||||
}
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -72,8 +88,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
/* background: #111;
|
||||
color: #fff; */
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
|
|
|
|||
|
|
@ -1221,6 +1221,11 @@ content-disposition@0.5.4:
|
|||
dependencies:
|
||||
safe-buffer "5.2.1"
|
||||
|
||||
core-js@^3.22.0:
|
||||
version "3.23.4"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.4.tgz#92d640faa7f48b90bbd5da239986602cfc402aa6"
|
||||
integrity sha512-vjsKqRc1RyAJC3Ye2kYqgfdThb3zYnx9CrqoCcjMOENMtQPC7ZViBvlDxwYU/2z2NI/IPuiXw5mT4hWhddqjzQ==
|
||||
|
||||
core-util-is@1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
|
||||
|
|
@ -1260,6 +1265,11 @@ csstype@^2.6.8:
|
|||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
|
||||
integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
|
||||
|
||||
custom-event-polyfill@^1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
|
||||
integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
|
||||
|
||||
cypress@10.3.0:
|
||||
version "10.3.0"
|
||||
resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.3.0.tgz#fae8d32f0822fcfb938e79c7c31ef344794336ae"
|
||||
|
|
@ -2777,6 +2787,11 @@ listr2@^3.8.3:
|
|||
through "^2.3.8"
|
||||
wrap-ansi "^7.0.0"
|
||||
|
||||
loadjs@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
|
||||
integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
|
||||
|
||||
locate-path@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
|
||||
|
|
@ -3301,6 +3316,17 @@ plimit-lit@^1.2.6:
|
|||
dependencies:
|
||||
queue-lit "^1.2.7"
|
||||
|
||||
plyr@3.7.2:
|
||||
version "3.7.2"
|
||||
resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.2.tgz#183d2397e7401a577700c8319fe133692b4aff54"
|
||||
integrity sha512-I0ZC/OI4oJ0iWG9s2rrnO0YFO6aLyrPiQBq9kum0FqITYljwTPBbYL3TZZu8UJQJUq7tUWN18Q7ACwNCkGKABQ==
|
||||
dependencies:
|
||||
core-js "^3.22.0"
|
||||
custom-event-polyfill "^1.0.7"
|
||||
loadjs "^4.2.0"
|
||||
rangetouch "^2.0.1"
|
||||
url-polyfill "^1.1.12"
|
||||
|
||||
pngjs@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
|
||||
|
|
@ -3546,6 +3572,11 @@ rangestr@0.0.1:
|
|||
resolved "https://registry.yarnpkg.com/rangestr/-/rangestr-0.0.1.tgz#f72ff9246f10f2a7d7c16e14616f617be2c2635a"
|
||||
integrity sha1-9y/5JG8Q8qfXwW4UYW9he+LCY1o=
|
||||
|
||||
rangetouch@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
|
||||
integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
|
||||
|
||||
readdirp@~3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
|
||||
|
|
@ -4176,6 +4207,11 @@ uri-js@^4.2.2:
|
|||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
url-polyfill@^1.1.12:
|
||||
version "1.1.12"
|
||||
resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
|
||||
integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
|
||||
|
||||
utf-8-validate@^5.0.2:
|
||||
version "5.0.2"
|
||||
resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
|
||||
|
|
|
|||
Loading…
Reference in a new issue