@huyooo/file-explorer-preview 0.4.27 → 0.4.30

package/src/components/ui/SpeedMenu.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { usePopupMenu } from '../../composables/usePopupMenu';
+
+const props = defineProps<{
+  /** 可选的速度列表 */
+  options?: number[];
+  /** 高亮颜色 */
+  activeColor?: string;
+  /** 父级（控制栏）是否可见，隐藏时同步关闭弹窗 */
+  parentVisible?: boolean;
+}>();
+
+const speed = defineModel<number>('speed', { required: true });
+
+const { showMenu, openMenu, closeMenu } = usePopupMenu();
+let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+function scheduleClose() {
+  if (closeTimer) return;
+  closeTimer = setTimeout(() => {
+    closeTimer = undefined;
+    closeMenu();
+  }, 200);
+}
+
+watch(() => props.parentVisible, (v) => {
+  if (v === false) closeMenu();
+});
+
+const speedOptions = computed(() => props.options ?? [0.5, 0.75, 1, 1.25, 1.5, 2]);
+
+function selectSpeed(nextSpeed: number) {
+  speed.value = nextSpeed;
+  closeMenu();
+}
+</script>
+
+<template>
+  <div
+    class="speed-wrapper"
+    :class="{ 'menu-open': showMenu }"
+    @mouseenter="openMenu"
+    @mouseleave="scheduleClose"
+    @click.stop
+  >
+    <div class="speed-trigger">
+      <button
+        class="btn speed-btn"
+        :title="`播放速度: ${speed}x`"
+      >
+        <span class="speed-text">{{ speed }}x</span>
+      </button>
+
+      <Transition name="menu-fade">
+        <div v-if="showMenu" class="speed-menu">
+        <button 
+          v-for="opt in speedOptions" 
+          :key="opt"
+          class="speed-option"
+          :class="{ active: speed === opt }"
+          :style="speed === opt ? { color: activeColor || 'var(--huyooo-primary)' } : {}"
+          @click="selectSpeed(opt)"
+        >
+          {{ opt }}x
+        </button>
+      </div>
+    </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.speed-wrapper {
+  position: relative;
+}
+
+.speed-trigger {
+  position: relative;
+}
+
+.speed-wrapper.menu-open {
+  padding-top: 220px;
+  margin-top: -220px;
+}
+
+.btn {
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--huyooo-text);
+  transition: all 0.15s;
+}
+
+.btn:hover {
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-on-primary, #ffffff);
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.speed-text {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.speed-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 10px;
+  padding: 6px;
+  min-width: 90px;
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
+}
+
+.speed-option {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  color: var(--huyooo-text);
+  font-size: 13px;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.speed-option:hover {
+  background: var(--huyooo-muted-hover);
+}
+
+.speed-option.active {
+  font-weight: 600;
+}
+
+/* 菜单过渡动画 */
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+</style>
+

package/src/components/ui/SubtitleMenu.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { watch } from 'vue';
+import type { SubtitleTrack } from '../../utils/subtitle';
+import { usePopupMenu } from '../../composables/usePopupMenu';
+
+const props = defineProps<{
+  /** 字幕轨道列表 */
+  tracks: SubtitleTrack[];
+  /** 高亮颜色 */
+  activeColor?: string;
+  /** 父级（控制栏）是否可见，隐藏时同步关闭弹窗 */
+  parentVisible?: boolean;
+}>();
+
+const currentTrack = defineModel<number>('currentTrack', { required: true });
+
+const emit = defineEmits<{
+  /** 加载字幕文件 */
+  loadSubtitle: [];
+}>();
+
+const { showMenu, openMenu, closeMenu } = usePopupMenu();
+let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+function scheduleClose() {
+  if (closeTimer) return;
+  closeTimer = setTimeout(() => {
+    closeTimer = undefined;
+    closeMenu();
+  }, 200);
+}
+
+watch(() => props.parentVisible, (v) => {
+  if (v === false) closeMenu();
+});
+
+/** 选择轨道 */
+function selectTrack(index: number) {
+  currentTrack.value = index;
+  closeMenu();
+}
+
+/** 加载字幕 */
+function handleLoadSubtitle() {
+  emit('loadSubtitle');
+  closeMenu();
+}
+</script>
+
+<template>
+  <div
+    class="subtitle-wrapper"
+    :class="{ 'menu-open': showMenu }"
+    @mouseenter="openMenu"
+    @mouseleave="scheduleClose"
+    @click.stop
+  >
+    <div class="subtitle-trigger">
+      <button
+        class="btn"
+        :class="{ active: currentTrack >= 0 }"
+        title="字幕"
+      >
+      <Icon icon="lucide:captions" />
+    </button>
+    
+    <Transition name="menu-fade">
+      <div v-if="showMenu" class="subtitle-menu">
+        <!-- 关闭字幕选项 -->
+        <button
+          class="menu-option"
+          :class="{ active: currentTrack === -1 }"
+          :style="currentTrack === -1 ? { color: activeColor || 'var(--huyooo-primary)' } : {}"
+          @click="selectTrack(-1)"
+        >
+          <span class="check-mark">
+            <Icon v-if="currentTrack === -1" icon="lucide:check" />
+          </span>
+          <span>关闭</span>
+        </button>
+        
+        <!-- 字幕轨道列表 -->
+        <button
+          v-for="(track, index) in tracks"
+          :key="index"
+          class="menu-option"
+          :class="{ active: currentTrack === index }"
+          :style="currentTrack === index ? { color: activeColor || 'var(--huyooo-primary)' } : {}"
+          @click="selectTrack(index)"
+        >
+          <span class="check-mark">
+            <Icon v-if="currentTrack === index" icon="lucide:check" />
+          </span>
+          <span>{{ track.label }}</span>
+        </button>
+        
+        <!-- 分隔线 -->
+        <div class="menu-divider" />
+        
+        <!-- 加载字幕按钮 -->
+        <button class="menu-option load-option" @click="handleLoadSubtitle">
+          <span class="check-mark">
+            <Icon icon="lucide:plus" />
+          </span>
+          <span>加载字幕...</span>
+        </button>
+      </div>
+    </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.subtitle-wrapper {
+  position: relative;
+}
+
+.subtitle-trigger {
+  position: relative;
+}
+
+.subtitle-wrapper.menu-open {
+  padding-top: 280px;
+  margin-top: -280px;
+}
+
+.btn {
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--huyooo-text);
+  transition: all 0.15s;
+}
+
+.btn:hover {
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-on-primary, #ffffff);
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.btn.active {
+  color: var(--huyooo-primary);
+}
+
+.btn :deep(.iconify) {
+  font-size: 18px;
+}
+
+.subtitle-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 10px;
+  padding: 6px;
+  min-width: 140px;
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
+}
+
+.menu-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  color: var(--huyooo-text);
+  font-size: 13px;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.menu-option:hover {
+  background: var(--huyooo-muted-hover);
+}
+
+.menu-option.active {
+  font-weight: 600;
+}
+
+.check-mark {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.check-mark :deep(.iconify) {
+  font-size: 14px;
+}
+
+.load-option {
+  color: var(--huyooo-text-muted);
+}
+
+.load-option .check-mark {
+  color: var(--huyooo-text-disabled);
+}
+
+.menu-divider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--huyooo-border);
+}
+
+/* 菜单过渡动画 */
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+</style>

package/src/components/ui/SubtitleOverlay.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SubtitleCue } from '../../utils/subtitle';
+
+const props = defineProps<{
+  /** 当前字幕 */
+  cue: SubtitleCue | null;
+  /** 是否显示字幕 */
+  visible: boolean;
+  /** 字幕字体大小 */
+  fontSize?: number;
+}>();
+
+const fontSize = computed(() => props.fontSize || 24);
+
+/** 处理字幕文本，转换换行符为 HTML */
+const formattedText = computed(() => {
+  if (!props.cue?.text) return '';
+  return props.cue.text
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\n/g, '<br>');
+});
+</script>
+
+<template>
+  <Transition name="subtitle-fade">
+    <div 
+      v-if="visible && cue" 
+      class="subtitle-overlay"
+      :style="{ '--subtitle-font-size': fontSize + 'px' }"
+    >
+      <div class="subtitle-text" v-html="formattedText" />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.subtitle-overlay {
+  position: absolute;
+  bottom: 80px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  padding: 0 40px;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.subtitle-text {
+  max-width: 80%;
+  padding: 8px 16px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 10px;
+  border: 1px solid var(--huyooo-border);
+  color: var(--huyooo-text);
+  font-size: var(--subtitle-font-size);
+  font-weight: 500;
+  line-height: 1.4;
+  text-align: center;
+  box-shadow: var(--huyooo-shadow-lg);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 淡入淡出动画 */
+.subtitle-fade-enter-active,
+.subtitle-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.subtitle-fade-enter-from,
+.subtitle-fade-leave-to {
+  opacity: 0;
+}
+</style>
+

package/src/components/ui/VolumeControl.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import { useSliderDrag } from '../../composables/useSliderDrag';
+
+const props = defineProps<{
+  /** 当前音量 (0-1) */
+  volume: number;
+  /** 是否静音 */
+  muted: boolean;
+  /** 父级（控制栏）是否可见，隐藏时同步关闭弹窗 */
+  parentVisible?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:volume': [volume: number];
+  toggleMute: [];
+}>();
+
+const volumeTrackRef = ref<HTMLElement>();
+const showMenu = ref(false);
+let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+function openMenu() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = undefined;
+  }
+  showMenu.value = true;
+}
+
+function closeMenu() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = undefined;
+  }
+  showMenu.value = false;
+}
+
+/** 悬停离开时延迟关闭，便于移动到弹窗内 */
+function scheduleClose() {
+  if (closeTimer) return;
+  closeTimer = setTimeout(closeMenu, 200);
+}
+
+/** 父级隐藏时立即关闭 */
+watch(() => props.parentVisible, (v) => {
+  if (v === false) closeMenu();
+});
+
+/** 点击外部关闭（与 SpeedMenu/SubtitleMenu 一致） */
+onMounted(() => {
+  document.addEventListener('click', closeMenu);
+});
+onUnmounted(() => {
+  document.removeEventListener('click', closeMenu);
+});
+
+const { isDragging, handleMouseDown, handleTouchStart } = useSliderDrag({
+  getElement: () => volumeTrackRef.value,
+  onChange: (percent) => emit('update:volume', percent),
+  thumbRadius: 6,
+  orientation: 'vertical',
+});
+
+/** 音量图标 */
+const volumeIcon = computed(() => {
+  if (props.muted || props.volume <= 0) return 'lucide:volume-x';
+  if (props.volume > 0.5) return 'lucide:volume-2';
+  return 'lucide:volume-1';
+});
+
+/** 音量百分比 */
+const volumePercent = computed(() => Math.round(props.volume * 100));
+</script>
+
+<template>
+  <div
+    class="volume-wrapper"
+    :class="{ 'menu-open': showMenu }"
+    @mouseenter="openMenu"
+    @mouseleave="scheduleClose"
+    @click.stop
+  >
+    <div class="volume-trigger">
+      <button
+        class="btn"
+        :title="muted ? '取消静音 (M)' : `音量 ${volumePercent}% (M)`"
+        @click="emit('toggleMute')"
+      >
+        <Icon :icon="volumeIcon" />
+      </button>
+
+      <Transition name="menu-fade">
+        <div v-if="showMenu" class="volume-popover">
+          <span class="volume-value">{{ volumePercent }}%</span>
+          <div
+            ref="volumeTrackRef"
+            class="volume-track"
+            :class="{ dragging: isDragging }"
+            @mousedown="handleMouseDown"
+            @touchstart="handleTouchStart"
+          >
+            <div class="volume-progress" :style="{ height: (volume * 100) + '%' }" />
+            <div class="volume-thumb" :style="{ bottom: (volume * 100) + '%' }" />
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.volume-wrapper {
+  position: relative;
+}
+
+/* 定位基准：仅按钮高度，bottom:100% 不会因 padding 变大 */
+.volume-trigger {
+  position: relative;
+}
+
+/* 弹窗打开时扩展悬停区域，便于从按钮移动到弹窗 */
+.volume-wrapper.menu-open {
+  padding-top: 96px;
+  margin-top: -96px;
+}
+
+.btn {
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--huyooo-text);
+  transition: all 0.15s;
+}
+
+.btn:hover {
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-on-primary, #ffffff);
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.btn :deep(.iconify) {
+  font-size: 18px;
+}
+
+.volume-popover {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 8px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 10px;
+  border: 1px solid var(--huyooo-border);
+  box-shadow: var(--huyooo-shadow-lg);
+}
+
+.volume-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--huyooo-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.volume-track {
+  width: 4px;
+  height: 80px;
+  background: color-mix(in srgb, var(--huyooo-text) 20%, transparent);
+  border-radius: 2px;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  transition: width 0.15s;
+}
+
+.volume-track:hover,
+.volume-track.dragging {
+  width: 6px;
+}
+
+.volume-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: var(--huyooo-primary);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.volume-thumb {
+  position: absolute;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  background: var(--huyooo-on-primary, #fff);
+  border-radius: 50%;
+  transform: translate(-50%, 50%) scale(0);
+  pointer-events: none;
+  box-shadow: var(--huyooo-shadow-sm);
+  transition: transform 0.15s;
+}
+
+.volume-track:hover .volume-thumb,
+.volume-track.dragging .volume-thumb {
+  transform: translate(-50%, 50%) scale(1);
+}
+
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(6px);
+}
+</style>