diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-03 17:44:28 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-02-03 17:44:28 +0900 |
| commit | a8c252a613a2154a10b3500cf06e5b1f93b1e21d (patch) | |
| tree | 607b249e834f206736a9c946a6317ecf78a3a451 /packages | |
| parent | perf: use replaceAll instead of regex (diff) | |
| parent | enhance - Added vue-plyr as the standard video player (#9766) (diff) | |
| download | misskey-a8c252a613a2154a10b3500cf06e5b1f93b1e21d.tar.gz misskey-a8c252a613a2154a10b3500cf06e5b1f93b1e21d.tar.bz2 misskey-a8c252a613a2154a10b3500cf06e5b1f93b1e21d.zip | |
Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop
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; |