Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: MkMedia #10429 ? + styling

Browse Source
This commit is contained in:
freeplay 2023-07-08 23:21:02 -04:00
parent 9ecffcb1f9
commit a19e014cc5
1 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/client/src/components/MkMedia.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="media" :class="{ mini: plyrMini }"> <div class="media" v-size="{ max: [350] }">
<button v-if="hide" class="hidden" @click="hide = false"> <button v-if="hide" class="hidden" @click="hide = false">
<ImgWithBlurhash <ImgWithBlurhash
:hash="media.blurhash" :hash="media.blurhash"
@ -80,7 +80,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { watch, ref, onMounted } from "vue"; import { watch, ref } from "vue";
import VuePlyr from "vue-plyr"; import VuePlyr from "vue-plyr";
import "vue-plyr/dist/vue-plyr.css"; import "vue-plyr/dist/vue-plyr.css";
import type * as misskey from "calckey-js"; import type * as misskey from "calckey-js";
@ -98,7 +98,6 @@ const props = defineProps<{
let hide = $ref(true); let hide = $ref(true);
const plyr = ref(); const plyr = ref();
const plyrMini = ref(false);
const url = const url =
props.raw || defaultStore.state.loadRawImages props.raw || defaultStore.state.loadRawImages
@ -130,17 +129,6 @@ watch(
immediate: true, immediate: true,
}, },
); );
onMounted(() => {
if (props.media.type.startsWith("video")) {
plyrMini.value = plyr.value.player.media.scrollWidth < 300;
if (plyrMini.value) {
plyr.value.player.on("play", () => {
plyr.value.player.fullscreen.enter();
});
}
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -229,16 +217,46 @@ onMounted(() => {
pointer-events: none; pointer-events: none;
} }
} }
&.mini { :deep(.plyr__controls) {
contain: strict;
height: 24px;
box-sizing: content-box;
}
:deep(.plyr__volume) {
display: flex;
min-width: max-content;
width: 110px;
transition: width 0.2s cubic-bezier(0,0,0,1);
[data-plyr="volume"] {
width: 0;
flex-grow: 1;
transition: margin 0.3s, opacity .2s 0.2s;
}
&:not(:hover):not(:focus-within) {
width: 0px;
transition: width 0.2s;
[data-plyr="volume"] {
margin-inline: 0px;
opacity: 0;
transition: margin 0.3s, opacity 0.1s;
}
}
}
&.max-width_350px {
:deep(.plyr:not(:fullscreen)) { :deep(.plyr:not(:fullscreen)) {
min-width: unset !important; min-width: unset !important;
.plyr__control--overlaid, .plyr__control--overlaid,
.plyr__progress__container, .plyr__progress__container,
.plyr__volume, .plyr__volume,
[data-plyr="fullscreen"] { [data-plyr="download"] {
display: none; display: none;
} }
} }
:deep(.plyr__time) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
</style> </style>