diff --git a/fe_calckey/frontend/client/package.json b/fe_calckey/frontend/client/package.json index fac50b4..395060b 100644 --- a/fe_calckey/frontend/client/package.json +++ b/fe_calckey/frontend/client/package.json @@ -27,7 +27,7 @@ "@types/tinycolor2": "1.4.3", "@types/uuid": "8.3.4", "@vitejs/plugin-vue": "^5.0.4", - "@vue/runtime-core": "^3.4", + "@vue/runtime-core": "^3.4.26", "@vueuse/core": "^10.9.0", "autobind-decorator": "2.4.0", "autosize": "5.0.2", @@ -64,7 +64,7 @@ "prismjs": "1.29.0", "punycode": "2.1.1", "rndstr": "1.0.0", - "rollup": "^4.14.1", + "rollup": "^4.17.1", "s-age": "1.1.2", "sass": "1.62.1", "seedrandom": "3.0.5", @@ -80,15 +80,15 @@ "tsc-alias": "1.8.6", "tsconfig-paths": "4.2.0", "twemoji-parser": "14.0.0", - "typescript": "^5.4.4", + "typescript": "^5.4.5", "unicode-emoji-json": "^0.4.0", "uuid": "9.0.0", "vanilla-tilt": "1.8.0", - "vidstack": "^1.11", - "vite": "^5.2.8", + "vidstack": "^1.11.21", + "vite": "^5.2.10", "vite-plugin-compression": "^0.5.1", - "vue": "^3.4.21", - "vue-component-type-helpers": "^2.0.11", + "vue": "^3.4.26", + "vue-component-type-helpers": "^2.0.14", "vue-isyourpasswordsafe": "^2.0.0", "vue3-otp-input": "^0.4.4", "vuedraggable": "4.1.0" diff --git a/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue b/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue index a06bd9d..8b05748 100644 --- a/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue +++ b/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue @@ -4,19 +4,21 @@ :title="video.comment" :src="{ src: video.url, - type: magTransProperty(video, 'mime_type', 'type'), + type: mediaType, }" - :media-type="magTransProperty(video, 'mime_type', 'type')" + :media-type="mediaType" :volume="volume" :controlsDelay="500" :hideOnMouseLeave="true" :load="'play'" + streamType="on-demand" crossOrigin playsInline @volume-change="volumeChange" > @@ -43,7 +45,7 @@ import { computed, ref } from "vue"; import { useWindowSize } from "@vueuse/core"; import { MediaPlayerElement } from "vidstack/elements"; -defineProps<{ +const props = defineProps<{ video: packed.PackDriveFileBase | misskey.entities.DriveFile; }>(); @@ -82,6 +84,15 @@ const { width } = useWindowSize(); const controls = computed(() => structuredClone(getLayoutControls(width.value)) ); +const mediaType = computed(() => { + const type = magTransProperty(props.video, 'mime_type', 'type'); + switch (type) { + case "audio/x-flac": + return "audio/flac"; + default: + return type; + } +}); function volumeChange(e: Event): void { let tgt = e.target as MediaPlayerElement | undefined; @@ -92,6 +103,10 @@ function volumeChange(e: Event): void {