profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: plyr

Browse source
This commit is contained in:
ThatOneCalculator 2022-07-13 21:04:51 -07:00
parent e365139961
commit d0c0c51edf
4 changed files with 70 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/client/package.json
View file

@ -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",

14
packages/client/src/components/media-banner.vue
View file

@ -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;

20
packages/client/src/components/media-video.vue
View file

@ -10,8 +10,10 @@
:poster="video.thumbnailUrl"
:title="video.comment"
:alt="video.comment"
class="plyr"
preload="none"
controls
playsinline
@contextmenu.stop
>
<source
@ -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;

36
packages/client/yarn.lock
View file

@ -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"