diff options
| author | Roxy Squires <squires1993@gmail.com> | 2023-02-03 08:15:25 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-02-03 17:15:25 +0900 |
| commit | 4b8b29b862f834ebea0f92f74478bfe26128c3b4 (patch) | |
| tree | 5958ab069c8b4e37fbadcf2de958708a3f8d71f4 /packages | |
| parent | New Crowdin updates (#9760) (diff) | |
| download | misskey-4b8b29b862f834ebea0f92f74478bfe26128c3b4.tar.gz misskey-4b8b29b862f834ebea0f92f74478bfe26128c3b4.tar.bz2 misskey-4b8b29b862f834ebea0f92f74478bfe26128c3b4.zip | |
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>
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/package.json | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 29 |
2 files changed, 18 insertions, 12 deletions
diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 1e0ab6ba26..40183d64ce 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -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", diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index df0bf84116..5a2da050bb 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -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; |