add MusicPlayer

src/pages/file/FileExplorerList.vue

@@ -9,7 +9,7 @@
 			<div aria-hidden="true" class="spacer top"></div>
 		</template>
 		<template #default="{ item }">
-			<t-swipe-cell>
+			<t-swipe-cell :disabled="!isSwipeActionVisible(item)" :left="resolveLeftActions(item)">
 				<t-cell
 					class="cell"
 					:title="item.name"
@@ -35,17 +35,52 @@
 </template>
 
 <script setup lang="ts">
+import { h, resolveComponent } from "vue";
 import { RecycleScroller } from "vue-virtual-scroller";
 import { type ExplorerItem } from "./fileExplorer.shared";
+import { isBrowserSupportedAudio } from "./fileAudio.shared";
 
 const props = defineProps<{
 	items: ExplorerItem[];
 	pendingPath?: string;
 }>();
 
-const emit = defineEmits<{
-	open: [item: ExplorerItem];
-}>();
+const emit = defineEmits(["open", "queue", "play"]);
+
+function isSwipeActionVisible(item: ExplorerItem): boolean {
+	return isBrowserSupportedAudio(item);
+}
+
+function resolveLeftActions(item: ExplorerItem) {
+	if (!isSwipeActionVisible(item)) {
+		return undefined;
+	}
+
+	const buttonComponent = resolveComponent("t-button");
+	const iconComponent = resolveComponent("t-icon");
+
+	return () => h("div", { class: "actions" }, [
+		h(buttonComponent, {
+			class: "action-btn queue-action",
+			size: "small",
+			shape: "square",
+			theme: "primary",
+			variant: "outline",
+			onClick: () => handleQueue(item)
+		}, {
+			icon: () => h(iconComponent, { name: "queue" })
+		}),
+		h(buttonComponent, {
+			class: "action-btn play-action",
+			size: "small",
+			shape: "square",
+			theme: "primary",
+			onClick: () => handlePlay(item)
+		}, {
+			icon: () => h(iconComponent, { name: "play" })
+		})
+	]);
+}
 
 function handleOpen(item: ExplorerItem): void {
 	if (props.pendingPath) {
@@ -54,6 +89,22 @@ function handleOpen(item: ExplorerItem): void {
 
 	emit("open", item);
 }
+
+function handleQueue(item: ExplorerItem): void {
+	if (props.pendingPath) {
+		return;
+	}
+
+	emit("queue", item);
+}
+
+function handlePlay(item: ExplorerItem): void {
+	console.log("play", item);
+	if (props.pendingPath) {
+		return;
+	}
+	emit("play", item);
+}
 </script>
 
 <style scoped lang="less">
@@ -113,6 +164,28 @@ function handleOpen(item: ExplorerItem): void {
 		color: var(--app-sub);
 	}
 
+	&:deep(.actions) {
+		gap: .5rem;
+		height: 100%;
+		display: flex;
+		padding: 0 .75rem;
+		align-items: center;
+	}
+
+	&:deep(.queue-action) {
+		background: rgba(255, 255, 255, .92);
+	}
+
+	&:deep(.play-action) {
+		background: var(--td-brand-color);
+	}
+
+	&:deep(.action-btn) {
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: .75rem;
+	}
+
 	.cell {
 
 		&:deep(.t-cell__content) {