client: refactor some components to use setup to simplify them

client/src/components/Notifier.vue

@@ -1,54 +1,32 @@
 <template>
 	<transition-group appear name="toast-list" tag="div" class="toast-list">
-		<div
-			v-for="(toast, index) in $store.state.toast.notifications"
-			:key="toast.id"
-			class="toast-item"
-		>
-			<ToastNotification :toast="toast" :number="index" />
+		<div v-for="(t, index) in store.state.toast.notifications" :key="t.id" class="toast-item">
+			<ToastNotification :toast="t" :number="index" />
 		</div>
 		<v-btn
 			block
 			color="primary"
 			key="closeall"
 			@click="closeAll"
-			v-if="$store.state.toast.notifications.length > 1"
+			v-if="store.state.toast.notifications.length > 1"
 			data-cy="toast-close-all"
 		>
 			{{ $t("common.close-all") }}
 		</v-btn>
 	</transition-group>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import ToastNotification from "@/components/ToastNotification.vue";
 import { useStore } from "@/store";
 import toast from "@/util/toast";
 
-/**
- * Handles displaying all toast notifications.
- */
-const Notifier = defineComponent({
-	name: "Notifier",
-	components: {
-		ToastNotification,
-	},
-	setup() {
-		const store = useStore();
-		toast.setStore(store);
-
-		function closeAll() {
-			store.commit("toast/CLEAR_ALL_TOASTS");
-		}
+const store = useStore();
+toast.setStore(store);
 
-		return {
-			closeAll,
-		};
-	},
-});
-
-export default Notifier;
+function closeAll() {
+	store.commit("toast/CLEAR_ALL_TOASTS");
+}
 </script>
 
 <style lang="scss" scoped>

client/src/components/RestoreQueue.vue

@@ -36,50 +36,32 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
+<script lang="ts" setup>
+import { ref } from "vue";
 import { useStore } from "../store";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import VideoQueueItem from "./VideoQueueItem.vue";
 
-export default defineComponent({
-	name: "RestoreQueue",
-	components: {
-		VideoQueueItem,
-	},
-	setup() {
-		const store = useStore();
-		const connection = useConnection();
-		const roomapi = useRoomApi(connection);
+const store = useStore();
+const connection = useConnection();
+const roomapi = useRoomApi(connection);
 
-		const showRestorePreview = ref(false);
+const showRestorePreview = ref(false);
 
-		function showDialog() {
-			showRestorePreview.value = true;
-		}
-
-		function restore() {
-			roomapi.restoreQueue();
-			showRestorePreview.value = false;
-		}
-
-		function discard() {
-			roomapi.restoreQueue({ discard: true });
-			showRestorePreview.value = false;
-		}
-
-		return {
-			store,
+function showDialog() {
+	showRestorePreview.value = true;
+}
 
-			showRestorePreview,
+function restore() {
+	roomapi.restoreQueue();
+	showRestorePreview.value = false;
+}
 
-			showDialog,
-			restore,
-			discard,
-		};
-	},
-});
+function discard() {
+	roomapi.restoreQueue({ discard: true });
+	showRestorePreview.value = false;
+}
 </script>
 
 <style lang="scss">

client/src/components/controls/BasicControls.vue

@@ -63,67 +63,49 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
 import _ from "lodash";
 import { useStore } from "@/store";
 import { granted } from "@/util/grants";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 
-export const BasicControls = defineComponent({
-	name: "BasicControls",
-	props: {
-		currentPosition: {
-			type: Number,
-			default: 0,
-		},
-	},
-	emits: ["seek", "play", "pause", "skip"],
-	setup(props, { emit }) {
-		const store = useStore();
-		const roomapi = useRoomApi(useConnection());
+const props = withDefaults(
+	defineProps<{
+		currentPosition: number;
+	}>(),
+	{
+		currentPosition: 0,
+	}
+);
 
-		/** Send a message to play or pause the video, depending on the current state. */
-		function togglePlayback() {
-			if (store.state.room.isPlaying) {
-				roomapi.pause();
-				emit("pause");
-			} else {
-				roomapi.play();
-				emit("play");
-			}
-		}
+const emit = defineEmits(["seek", "play", "pause", "skip"]);
 
-		function seekDelta(delta: number) {
-			roomapi.seek(
-				_.clamp(
-					props.currentPosition + delta,
-					0,
-					store.state.room.currentSource?.length ?? 0
-				)
-			);
-			emit("seek");
-		}
+const store = useStore();
+const roomapi = useRoomApi(useConnection());
 
-		function skip() {
-			roomapi.skip();
-			emit("skip");
-		}
+/** Send a message to play or pause the video, depending on the current state. */
+function togglePlayback() {
+	if (store.state.room.isPlaying) {
+		roomapi.pause();
+		emit("pause");
+	} else {
+		roomapi.play();
+		emit("play");
+	}
+}
 
-		return {
-			store,
-			roomapi,
-			granted,
+function seekDelta(delta: number) {
+	roomapi.seek(
+		_.clamp(props.currentPosition + delta, 0, store.state.room.currentSource?.length ?? 0)
+	);
+	emit("seek");
+}
 
-			togglePlayback,
-			seekDelta,
-			skip,
-		};
-	},
-});
-
-export default BasicControls;
+function skip() {
+	roomapi.skip();
+	emit("skip");
+}
 </script>
 
 <style lang="scss">

client/src/components/controls/LayoutSwitcher.vue

@@ -29,64 +29,48 @@
 	</v-btn>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, onMounted } from "vue";
+<script lang="ts" setup>
+import { computed, onMounted } from "vue";
 import { useStore } from "@/store";
 import { RoomLayoutMode } from "@/stores/settings";
 import { useRoomKeyboardShortcuts } from "@/util/keyboard-shortcuts";
 
-export const LayoutSwitcher = defineComponent({
-	name: "LayoutSwitcher",
-	setup() {
-		const store = useStore();
+const store = useStore();
 
-		const isMobile = computed(() => {
-			return window.matchMedia("only screen and (max-width: 760px)").matches;
-		});
+const isMobile = computed(() => {
+	return window.matchMedia("only screen and (max-width: 760px)").matches;
+});
 
-		function toggleFullscreen() {
-			if (document.fullscreenElement) {
-				document.exitFullscreen();
-			} else {
-				document.documentElement.requestFullscreen();
-				if (isMobile.value) {
-					// force the device into landscape mode to get the user to rotate the device
-					// but still allow exiting fullscreen by rotating the device back to portrait
-					if (screen.orientation) {
-						screen.orientation
-							.lock("landscape")
-							.then(() => screen.orientation.unlock());
-					}
-				}
+function toggleFullscreen() {
+	if (document.fullscreenElement) {
+		document.exitFullscreen();
+	} else {
+		document.documentElement.requestFullscreen();
+		if (isMobile.value) {
+			// force the device into landscape mode to get the user to rotate the device
+			// but still allow exiting fullscreen by rotating the device back to portrait
+			if (screen.orientation) {
+				screen.orientation.lock("landscape").then(() => screen.orientation.unlock());
 			}
 		}
+	}
+}
 
-		function rotateRoomLayout() {
-			const layouts = [RoomLayoutMode.default, RoomLayoutMode.theater];
-			const newLayout =
-				layouts[(layouts.indexOf(store.state.settings.roomLayout) + 1) % layouts.length];
-			store.commit("settings/UPDATE", { roomLayout: newLayout });
-		}
+function rotateRoomLayout() {
+	const layouts = [RoomLayoutMode.default, RoomLayoutMode.theater];
+	const newLayout =
+		layouts[(layouts.indexOf(store.state.settings.roomLayout) + 1) % layouts.length];
+	store.commit("settings/UPDATE", { roomLayout: newLayout });
+}
 
-		const shortcuts = useRoomKeyboardShortcuts();
-		onMounted(() => {
-			if (shortcuts) {
-				shortcuts.bind({ code: "KeyF" }, () => toggleFullscreen());
-			} else {
-				console.warn("No keyboard shortcuts available");
-			}
-		});
-
-		return {
-			store,
-			isMobile,
-			toggleFullscreen,
-			rotateRoomLayout,
-		};
-	},
+const shortcuts = useRoomKeyboardShortcuts();
+onMounted(() => {
+	if (shortcuts) {
+		shortcuts.bind({ code: "KeyF" }, () => toggleFullscreen());
+	} else {
+		console.warn("No keyboard shortcuts available");
+	}
 });
-
-export default LayoutSwitcher;
 </script>
 
 <style lang="scss">

client/src/components/controls/TimestampDisplay.vue

@@ -13,47 +13,30 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from "vue";
+<script lang="ts" setup>
+import { computed } from "vue";
 import { useStore } from "@/store";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import { secondsToTimestamp, timestampToSeconds } from "@/util/timestamp";
 import ClickToEdit from "../ClickToEdit.vue";
 
-export const TimestampDisplay = defineComponent({
-	name: "TimestampDisplay",
-	props: {
-		currentPosition: {
-			type: Number,
-			default: 0,
-		},
-	},
-	components: {
-		ClickToEdit,
-	},
-	setup() {
-		const store = useStore();
-		const roomapi = useRoomApi(useConnection());
-
-		const lengthDisplay = computed(() => {
-			const length = store.state.room.currentSource?.length ?? 0;
-			return secondsToTimestamp(length);
-		});
-
-		return {
-			store,
-			roomapi,
-
-			lengthDisplay,
-
-			secondsToTimestamp,
-			timestampToSeconds,
-		};
-	},
+withDefaults(
+	defineProps<{
+		currentPosition: number;
+	}>(),
+	{
+		currentPosition: 0,
+	}
+);
+
+const store = useStore();
+const roomapi = useRoomApi(useConnection());
+
+const lengthDisplay = computed(() => {
+	const length = store.state.room.currentSource?.length ?? 0;
+	return secondsToTimestamp(length);
 });
-
-export default TimestampDisplay;
 </script>
 
 <style lang="scss">