natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ⚡ Better import for plyr

This commit is contained in:
ThatOneCalculator 2022-08-16 17:43:33 -07:00
parent db61c366e8
commit da46c55db7
4 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

5
packages/client/src/components/media-banner.vue
View File

@ -6,6 +6,7 @@
<span>{{ $ts.clickToShow }}</span> <span>{{ $ts.clickToShow }}</span>
</div> </div>
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio"> <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<VuePlyr>
<audio ref="audioEl" <audio ref="audioEl"
class="audio" class="audio"
:src="media.url" :src="media.url"
@ -13,6 +14,7 @@
controls controls
preload="metadata" preload="metadata"
@volumechange="volumechange" /> @volumechange="volumechange" />
</VuePlyr>
</div> </div>
<a v-else class="download" <a v-else class="download"
:href="media.url" :href="media.url"
@ -28,7 +30,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import VuePlyr from 'vue-plyr';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
media: misskey.entities.DriveFile; media: misskey.entities.DriveFile;
@ -53,6 +57,7 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
margin-top: 4px; margin-top: 4px;
overflow: hidden; overflow: hidden;
--plyr-color-main: var(--accent);
> .download, > .download,
> .sensitive { > .sensitive {

6
packages/client/src/components/media-video.vue
View File

@ -6,7 +6,7 @@
</div> </div>
</div> </div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<vue-plyr> <VuePlyr>
<video <video
:poster="video.thumbnailUrl" :poster="video.thumbnailUrl"
:title="video.comment" :title="video.comment"
@ -20,7 +20,7 @@
:type="video.type" :type="video.type"
> >
</video> </video>
</vue-plyr> </VuePlyr>
<i class="fas fa-eye-slash" @click="hide = true"></i> <i class="fas fa-eye-slash" @click="hide = true"></i>
</div> </div>
</template> </template>
@ -28,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;

4
packages/client/src/init.ts
View File

@ -21,8 +21,6 @@ import widgets from '@/widgets';
import directives from '@/directives'; import directives from '@/directives';
import components from '@/components'; import components from '@/components';
import { version, ui, lang, host } from '@/config'; import { version, ui, lang, host } from '@/config';
import VuePlyr from 'vue-plyr';
import 'vue-plyr/dist/vue-plyr.css';
import { applyTheme } from '@/scripts/theme'; import { applyTheme } from '@/scripts/theme';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -179,8 +177,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
defineAsyncComponent(() => import('@/ui/universal.vue')), defineAsyncComponent(() => import('@/ui/universal.vue')),
); );
app.use(VuePlyr, { plyr: {} });
if (_DEV_) { if (_DEV_) {
app.config.performance = true; app.config.performance = true;
} }