feat: ⚗️ vue-plyr

This commit is contained in:
ThatOneCalculator 2022-08-16 16:32:44 -07:00
parent b6dcfede43
commit 70a4b5bf1f
4 changed files with 102 additions and 16 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "misskey", "name": "misskey",
"version": "12.118.1-calc.3", "version": "12.118.1-calc.4",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

View file

@ -60,6 +60,7 @@
"vanilla-tilt": "1.7.2", "vanilla-tilt": "1.7.2",
"vite": "3.0.7", "vite": "3.0.7",
"vue": "3.2.37", "vue": "3.2.37",
"vue-plyr": "^7.0.0",
"vue-prism-editor": "2.0.0-alpha.2", "vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "4.0.1" "vuedraggable": "4.0.1"
}, },

View file

@ -6,19 +6,21 @@
</div> </div>
</div> </div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<video <vue-plyr>
:poster="video.thumbnailUrl" <video
:title="video.comment" :poster="video.thumbnailUrl"
:alt="video.comment" :title="video.comment"
preload="none" :alt="video.comment"
controls preload="none"
@contextmenu.stop controls
> @contextmenu.stop
<source
:src="video.url"
:type="video.type"
> >
</video> <source
:src="video.url"
:type="video.type"
>
</video>
</vue-plyr>
<i class="fas fa-eye-slash" @click="hide = true"></i> <i class="fas fa-eye-slash" @click="hide = true"></i>
</div> </div>
</template> </template>
@ -26,7 +28,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import VuePlyr from 'vue-plyr';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';
const props = defineProps<{ const props = defineProps<{
video: misskey.entities.DriveFile; video: misskey.entities.DriveFile;
@ -38,6 +42,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
<style lang="scss" scoped> <style lang="scss" scoped>
.kkjnbbplepmiyuadieoenjgutgcmtsvu { .kkjnbbplepmiyuadieoenjgutgcmtsvu {
position: relative; position: relative;
--plyr-color-main: var(--accent);
> i { > i {
display: block; display: block;

View file

@ -33,7 +33,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@babel/parser@npm:^7.16.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": "@babel/parser@npm:^7.16.4, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
version: 7.18.11 version: 7.18.11
resolution: "@babel/parser@npm:7.18.11" resolution: "@babel/parser@npm:7.18.11"
bin: bin:
@ -1974,6 +1974,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@vue/compiler-sfc@npm:2.7.8":
version: 2.7.8
resolution: "@vue/compiler-sfc@npm:2.7.8"
dependencies:
"@babel/parser": ^7.18.4
postcss: ^8.4.14
source-map: ^0.6.1
checksum: da0b4b0866224fe2aee376a88c25914da4e73ba9e11e7aa2ed240b99897735b4a988e951dcae9c8f0843216c5a97050bf16e1bb04bf65541444a8bdfedc35b38
languageName: node
linkType: hard
"@vue/compiler-sfc@npm:3.2.37": "@vue/compiler-sfc@npm:3.2.37":
version: 3.2.37 version: 3.2.37
resolution: "@vue/compiler-sfc@npm:3.2.37" resolution: "@vue/compiler-sfc@npm:3.2.37"
@ -3914,6 +3925,7 @@ __metadata:
vanilla-tilt: 1.7.2 vanilla-tilt: 1.7.2
vite: 3.0.7 vite: 3.0.7
vue: 3.2.37 vue: 3.2.37
vue-plyr: ^7.0.0
vue-prism-editor: 2.0.0-alpha.2 vue-prism-editor: 2.0.0-alpha.2
vuedraggable: 4.0.1 vuedraggable: 4.0.1
languageName: unknown languageName: unknown
@ -4400,7 +4412,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"core-js@npm:3": "core-js@npm:3, core-js@npm:^3.22.0":
version: 3.24.1 version: 3.24.1
resolution: "core-js@npm:3.24.1" resolution: "core-js@npm:3.24.1"
checksum: 6fb5bf0fd9e9f3e69d95616dd03332fea6758a715d2628c108b5faf17b48b0f580e90c4febb0a523c4665b0991a810de16289f86187fe79d70cc722dbd3edf0e checksum: 6fb5bf0fd9e9f3e69d95616dd03332fea6758a715d2628c108b5faf17b48b0f580e90c4febb0a523c4665b0991a810de16289f86187fe79d70cc722dbd3edf0e
@ -4599,6 +4611,20 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"csstype@npm:^3.1.0":
version: 3.1.0
resolution: "csstype@npm:3.1.0"
checksum: 644e986cefab86525f0b674a06889cfdbb1f117e5b7d1ce0fc55b0423ecc58807a1ea42ecc75c4f18999d14fc42d1d255f84662a45003a52bb5840e977eb2ffd
languageName: node
linkType: hard
"custom-event-polyfill@npm:^1.0.7":
version: 1.0.7
resolution: "custom-event-polyfill@npm:1.0.7"
checksum: f9ff2cf13e482a75b3cf83dce9e2c6e3063c5ac1b9c23ac440e4f27e875b0873445b11811237f3f30aeb1216e9ad20f9f9d30ccf5b1b658a4e50dd0b3e67b629
languageName: node
linkType: hard
"cwise-compiler@npm:^1.0.0, cwise-compiler@npm:^1.1.2": "cwise-compiler@npm:^1.0.0, cwise-compiler@npm:^1.1.2":
version: 1.1.3 version: 1.1.3
resolution: "cwise-compiler@npm:1.1.3" resolution: "cwise-compiler@npm:1.1.3"
@ -9410,6 +9436,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"loadjs@npm:^4.2.0":
version: 4.2.0
resolution: "loadjs@npm:4.2.0"
checksum: 2144723f55c75260ce6781b36009c40d098d96fe06e3ec5c85ba250cf96c3a0aa37169b829e818c40bcba7c5141a8e52736fec193333bb6260ab95f9a493a2ef
languageName: node
linkType: hard
"locate-path@npm:^5.0.0": "locate-path@npm:^5.0.0":
version: 5.0.0 version: 5.0.0
resolution: "locate-path@npm:5.0.0" resolution: "locate-path@npm:5.0.0"
@ -11514,6 +11547,19 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"plyr@github:sampotts/plyr#develop":
version: 3.7.0
resolution: "plyr@https://github.com/sampotts/plyr.git#commit=d434c9af16e641400aaee93188594208d88f2658"
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
checksum: ee85815c1c992141af030d71f70e79532814b142b0057c1bedbf7c74000a79f647147bb1f03f3a9f725341afa43e848e7b54168361d95285dfed30d53be63607
languageName: node
linkType: hard
"pngjs-nozlib@npm:1.0.0": "pngjs-nozlib@npm:1.0.0":
version: 1.0.0 version: 1.0.0
resolution: "pngjs-nozlib@npm:1.0.0" resolution: "pngjs-nozlib@npm:1.0.0"
@ -11849,7 +11895,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.4.16": "postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.4.14, postcss@npm:^8.4.16":
version: 8.4.16 version: 8.4.16
resolution: "postcss@npm:8.4.16" resolution: "postcss@npm:8.4.16"
dependencies: dependencies:
@ -12390,6 +12436,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"rangetouch@npm:^2.0.1":
version: 2.0.1
resolution: "rangetouch@npm:2.0.1"
checksum: 2aa7c0901d28356ef0c02021656ed7d11fc6652f01ffe92806862fc4593e75f7a5d52d4455fa1b0ab2123d438e03dc091315949dbfad9562a680440ac0dfeb7d
languageName: node
linkType: hard
"ratelimiter@npm:3.4.1": "ratelimiter@npm:3.4.1":
version: 3.4.1 version: 3.4.1
resolution: "ratelimiter@npm:3.4.1" resolution: "ratelimiter@npm:3.4.1"
@ -14986,6 +15039,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"url-polyfill@npm:^1.1.12":
version: 1.1.12
resolution: "url-polyfill@npm:1.1.12"
checksum: 3214cc82424c215e921dacadac56b4b099f995d24e14078369bea9ff8aa74d1a4c803ab03021e61e0a275bee7979d212d046092dba3aab73cf232ee6739ddee4
languageName: node
linkType: hard
"url@npm:0.10.3": "url@npm:0.10.3":
version: 0.10.3 version: 0.10.3
resolution: "url@npm:0.10.3" resolution: "url@npm:0.10.3"
@ -15268,6 +15328,16 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"vue-plyr@npm:^7.0.0":
version: 7.0.0
resolution: "vue-plyr@npm:7.0.0"
dependencies:
plyr: "github:sampotts/plyr#develop"
vue: ^2.6.12
checksum: 004d830cfc9dbe0563cafafab6240379b7224362d3e60d8d441126f0eaafd2487c7416cb434482165b52e961b83f020dfbc2645536aa8ba991f101477d984206
languageName: node
linkType: hard
"vue-prism-editor@npm:2.0.0-alpha.2": "vue-prism-editor@npm:2.0.0-alpha.2":
version: 2.0.0-alpha.2 version: 2.0.0-alpha.2
resolution: "vue-prism-editor@npm:2.0.0-alpha.2" resolution: "vue-prism-editor@npm:2.0.0-alpha.2"
@ -15290,6 +15360,16 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"vue@npm:^2.6.12":
version: 2.7.8
resolution: "vue@npm:2.7.8"
dependencies:
"@vue/compiler-sfc": 2.7.8
csstype: ^3.1.0
checksum: 45fc85a13fc027798ad859fe4a5509b54217ae2f129240fc349a799bd4dbc6848ef8fa9968ab7ef7afcb954735882dbfdeb746673aa3f051e4d7ae555c213a1b
languageName: node
linkType: hard
"vuedraggable@npm:4.0.1": "vuedraggable@npm:4.0.1":
version: 4.0.1 version: 4.0.1
resolution: "vuedraggable@npm:4.0.1" resolution: "vuedraggable@npm:4.0.1"