enhance - Added vue-plyr as the standard video player (#9766)
* Added Video player Added vue-plyr as the video play * Create node.js.yml * Delete node.js.yml * Added vue-plyr into pnpm-lock.yaml * tweak --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
Roxy Squires
GitHub
parent
d195406fdc
commit
4b8b29b862
3 changed files with 75 additions and 12 deletions
|
|
@ -62,6 +62,7 @@
|
|||
"typescript": "4.9.5",
|
||||
"uuid": "9.0.0",
|
||||
"vanilla-tilt": "1.8.0",
|
||||
"vue-plyr": "7.0.0",
|
||||
"vite": "4.1.1",
|
||||
"vue": "3.2.47",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
|
|
|
|||
|
|
@ -6,19 +6,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
|
||||
<video
|
||||
:poster="video.thumbnailUrl"
|
||||
:title="video.comment"
|
||||
:alt="video.comment"
|
||||
preload="none"
|
||||
controls
|
||||
@contextmenu.stop
|
||||
>
|
||||
<source
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
<vue-plyr>
|
||||
<video
|
||||
controls
|
||||
crossorigin
|
||||
playsinline
|
||||
:data-poster="video.thumbnailUrl"
|
||||
>
|
||||
</video>
|
||||
<source
|
||||
size="720"
|
||||
:src="video.url"
|
||||
:type="video.type"
|
||||
/>
|
||||
</video>
|
||||
</vue-plyr>
|
||||
<i class="ti ti-eye-off" @click="hide = true"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -26,7 +27,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import VuePlyr from 'vue-plyr';
|
||||
import { defaultStore } from '@/store';
|
||||
import 'vue-plyr/dist/vue-plyr.css';
|
||||
|
||||
const props = defineProps<{
|
||||
video: misskey.entities.DriveFile;
|
||||
|
|
@ -39,6 +42,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
|
|||
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
||||
position: relative;
|
||||
|
||||
--plyr-color-main: var(--accent);
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -453,6 +453,7 @@ importers:
|
|||
vite: 4.1.1
|
||||
vue: 3.2.47
|
||||
vue-eslint-parser: 9.1.0
|
||||
vue-plyr: 7.0.0
|
||||
vue-prism-editor: 2.0.0-alpha.2
|
||||
vue-tsc: 1.0.24
|
||||
vuedraggable: next
|
||||
|
|
@ -514,8 +515,10 @@ importers:
|
|||
vanilla-tilt: 1.8.0
|
||||
vite: 4.1.1_f5vcjb3akvjdur4ffzogu2hewu
|
||||
vue: 3.2.47
|
||||
vue-plyr: 7.0.0
|
||||
vue-prism-editor: 2.0.0-alpha.2_vue@3.2.47
|
||||
vuedraggable: 4.1.0_vue@3.2.47
|
||||
vue-plyr: 7.0.0
|
||||
devDependencies:
|
||||
'@types/escape-regexp': 0.0.1
|
||||
'@types/glob': 8.0.1
|
||||
|
|
@ -3111,6 +3114,14 @@ packages:
|
|||
'@vue/compiler-core': 3.2.47
|
||||
'@vue/shared': 3.2.47
|
||||
|
||||
/@vue/compiler-sfc/2.7.14:
|
||||
resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.20.7
|
||||
postcss: 8.4.21
|
||||
source-map: 0.6.1
|
||||
dev: false
|
||||
|
||||
/@vue/compiler-sfc/3.2.47:
|
||||
resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
|
||||
dependencies:
|
||||
|
|
@ -4907,6 +4918,14 @@ packages:
|
|||
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
|
||||
dev: false
|
||||
|
||||
/csstype/3.1.1:
|
||||
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
|
||||
dev: false
|
||||
|
||||
/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:
|
||||
|
|
@ -9023,6 +9042,10 @@ packages:
|
|||
strip-bom: 2.0.0
|
||||
dev: false
|
||||
|
||||
/loadjs/4.2.0:
|
||||
resolution: {integrity: sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==}
|
||||
dev: false
|
||||
|
||||
/locate-path/5.0.0:
|
||||
resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -11096,6 +11119,10 @@ 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
|
||||
|
|
@ -12988,6 +13015,10 @@ packages:
|
|||
requires-port: 1.0.0
|
||||
dev: false
|
||||
|
||||
/url-polyfill/1.1.12:
|
||||
resolution: {integrity: sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==}
|
||||
dev: false
|
||||
|
||||
/url/0.10.3:
|
||||
resolution: {integrity: sha512-hzSUW2q06EqL1gKM/a+obYHLIO6ct2hwPuviqTTOcfFVc61UbfJ2Q32+uGL/HCPxKqrdGB5QUwIe7UqlDgwsOQ==}
|
||||
dependencies:
|
||||
|
|
@ -13206,6 +13237,13 @@ packages:
|
|||
- supports-color
|
||||
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.2.47:
|
||||
resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -13233,6 +13271,13 @@ packages:
|
|||
typescript: 4.9.5
|
||||
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.2.47:
|
||||
resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
|
||||
dependencies:
|
||||
|
|
@ -13655,3 +13700,15 @@ packages:
|
|||
name: browser-image-resizer
|
||||
version: 2.2.1-misskey.3
|
||||
dev: false
|
||||
|
||||
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.27.1
|
||||
custom-event-polyfill: 1.0.7
|
||||
loadjs: 4.2.0
|
||||
rangetouch: 2.0.1
|
||||
url-polyfill: 1.1.12
|
||||
dev: false
|
||||
|
|
|
|||
Loading…
Reference in a new issue