diff --git a/fe_calckey/frontend/client/package.json b/fe_calckey/frontend/client/package.json
index 4209156..fac50b4 100644
--- a/fe_calckey/frontend/client/package.json
+++ b/fe_calckey/frontend/client/package.json
@@ -28,6 +28,7 @@
"@types/uuid": "8.3.4",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/runtime-core": "^3.4",
+ "@vueuse/core": "^10.9.0",
"autobind-decorator": "2.4.0",
"autosize": "5.0.2",
"blurhash": "1.1.5",
diff --git a/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue b/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue
index 87fb093..a06bd9d 100644
--- a/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue
+++ b/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue
@@ -1,11 +1,12 @@
+ :controls="controls"
+ >
+
@@ -47,28 +39,65 @@ import type * as misskey from "calckey-js";
import { packed } from "magnetar-common";
import { magTransProperty } from "@/scripts-mag/mag-util";
import { ColdDeviceStorage } from "@/store";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { MediaPlayerElement } from "vidstack/elements";
defineProps<{
video: packed.PackDriveFileBase | misskey.entities.DriveFile;
}>();
+const controlsSmall = [
+ "play",
+ "current-time",
+ "progress",
+ "duration",
+ "mute",
+ "download",
+ "fullscreen",
+];
+
+const controlsLarge = [
+ "play",
+ "current-time",
+ "progress",
+ "duration",
+ "mute+volume",
+ "settings",
+ "download",
+ "pip",
+ "fullscreen",
+];
+
+function getLayoutControls(width: number) {
+ if (width > 600) {
+ return controlsLarge;
+ } else {
+ return controlsSmall;
+ }
+}
+
const volume = ref(ColdDeviceStorage.get("mediaVolume"));
+const { width } = useWindowSize();
+const controls = computed(() =>
+ structuredClone(getLayoutControls(width.value))
+);
function volumeChange(e: Event): void {
- if (e?.target?.volume)
- ColdDeviceStorage.set("mediaVolume", e.target.volume);
+ let tgt = e.target as MediaPlayerElement | undefined;
+
+ if (tgt?.volume) ColdDeviceStorage.set("mediaVolume", tgt?.volume);
}