@huyooo/file-explorer-preview 0.4.27 → 0.4.30

package/src/components/ui/PlayerControls.vue

@@ -0,0 +1,396 @@
+<template>
+  <Transition name="controls-slide">
+    <div
+      v-if="!hasError"
+      v-show="showControls"
+      class="controls"
+      @pointerenter="handleInteractionStart"
+      @pointerleave="handleInteractionEnd"
+      @focusin="handleInteractionStart"
+      @focusout="handleFocusOut"
+    >
+      <!-- 第一行：进度条独占，占满宽度 -->
+      <div class="progress-row">
+        <span class="time time-current">{{ currentTimeFormatted }}</span>
+        <ProgressBar
+          :played="playedPercent"
+          :buffered="bufferedPercent"
+          :duration="duration"
+          @change="handleProgressChange"
+        />
+        <span class="time time-duration">{{ durationFormatted }}</span>
+      </div>
+
+      <!-- 第二行：按钮组 -->
+      <div class="controls-row">
+        <div class="left-spacer" />
+        <div class="center-controls">
+          <button class="btn" @click="handleSeek(-10)" title="后退10秒 (←)">
+            <Icon icon="lucide:skip-back" />
+          </button>
+          <button class="btn btn-play" @click="handleTogglePlay" title="播放/暂停 (空格)">
+            <Icon v-if="!isPlaying" icon="lucide:play" />
+            <Icon v-else icon="lucide:pause" />
+          </button>
+          <button class="btn" @click="handleSeek(10)" title="快进10秒 (→)">
+            <Icon icon="lucide:skip-forward" />
+          </button>
+          <button class="btn btn-loop" :class="{ active: loop }" @click="handleToggleLoop" :title="loop ? '取消循环 (L)' : '单曲循环 (L)'">
+            <Icon icon="lucide:repeat-1" />
+          </button>
+        </div>
+        <div class="right-controls">
+          <VolumeControl
+            :volume="volume"
+            :muted="isMuted"
+            :parent-visible="showControls"
+            @update:volume="handleVolumeChange"
+            @toggle-mute="handleToggleMute"
+          />
+          <SpeedMenu v-model:speed="speedModel" :parent-visible="showControls" />
+          <span v-if="showRestoreWindowRatio" class="tooltip-wrapper">
+            <button class="btn" @click="handleRestoreWindowRatio" aria-label="恢复视频比例">
+              <Icon icon="lucide:scaling" />
+            </button>
+            <span class="tooltip" role="tooltip">恢复视频比例</span>
+          </span>
+          <SubtitleMenu
+            v-if="showSubtitle"
+            :tracks="subtitleTracks || []"
+            v-model:current-track="currentTrackModel"
+            :parent-visible="showControls"
+            @load-subtitle="handleLoadSubtitle"
+          />
+          <button v-if="showPiP" class="btn" @click="handleTogglePiP" title="画中画 (P)">
+            <Icon icon="lucide:picture-in-picture" />
+          </button>
+          <button v-if="showFullscreen" class="btn" @click="handleToggleFullscreen" :title="isFullscreen ? '退出全屏 (F)' : '全屏 (F)'">
+            <Icon v-if="!isFullscreen" icon="lucide:maximize" />
+            <Icon v-else icon="lucide:minimize" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+import { formatTime } from '../../utils/time';
+import type { SubtitleTrack } from '../../utils/subtitle';
+import ProgressBar from './ProgressBar.vue';
+import VolumeControl from './VolumeControl.vue';
+import SpeedMenu from './SpeedMenu.vue';
+import SubtitleMenu from './SubtitleMenu.vue';
+
+const props = defineProps<{
+  /** 是否显示控制器 */
+  showControls: boolean;
+  /** 是否有错误 */
+  hasError: boolean;
+  /** 是否正在播放 */
+  isPlaying: boolean;
+  /** 是否静音 */
+  isMuted: boolean;
+  /** 当前时间（秒） */
+  currentTime: number;
+  /** 总时长（秒） */
+  duration: number;
+  /** 已播放百分比 */
+  playedPercent: number;
+  /** 已缓冲百分比 */
+  bufferedPercent: number;
+  /** 音量 */
+  volume: number;
+  /** 播放速度 */
+  playbackRate: number;
+  /** 是否全屏 */
+  isFullscreen?: boolean;
+  /** 是否显示字幕菜单 */
+  showSubtitle?: boolean;
+  /** 是否显示画中画按钮 */
+  showPiP?: boolean;
+  /** 是否显示全屏按钮 */
+  showFullscreen?: boolean;
+  /** 是否显示恢复窗口比例按钮 */
+  showRestoreWindowRatio?: boolean;
+  /** 是否循环播放 */
+  loop?: boolean;
+  /** 字幕轨道列表 */
+  subtitleTracks?: SubtitleTrack[];
+  /** 当前选中的字幕轨道索引 */
+  currentTrackIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  /** 切换播放/暂停 */
+  togglePlay: [];
+  /** 快进/快退 */
+  seek: [seconds: number];
+  /** 进度条变化 */
+  progressChange: [percent: number];
+  /** 音量变化 */
+  volumeChange: [volume: number];
+  /** 切换静音 */
+  toggleMute: [];
+  /** 速度变化 */
+  speedChange: [speed: number];
+  /** 切换画中画 */
+  togglePiP: [];
+  /** 切换全屏 */
+  toggleFullscreen: [];
+  /** 切换循环 */
+  toggleLoop: [];
+  /** 恢复窗口比例 */
+  restoreWindowRatio: [];
+  /** 切换字幕轨道 */
+  trackChange: [index: number];
+  /** 加载字幕文件 */
+  loadSubtitle: [];
+  /** 用户正在和控制器交互 */
+  controlsInteractionStart: [];
+  /** 用户结束和控制器交互 */
+  controlsInteractionEnd: [];
+}>();
+
+/** 是否按小时格式显示（与总时长对齐，避免进度条宽度跳动） */
+const useHoursFormat = computed(() => Number.isFinite(props.duration) && props.duration >= 3600);
+
+/** 格式化的时间显示 */
+const currentTimeFormatted = computed(() => formatTime(props.currentTime, useHoursFormat.value));
+const durationFormatted = computed(() => formatTime(props.duration, useHoursFormat.value));
+const speedModel = computed({
+  get: () => props.playbackRate,
+  set: (speed: number) => emit('speedChange', speed),
+});
+const currentTrackModel = computed({
+  get: () => props.currentTrackIndex ?? -1,
+  set: (index: number) => emit('trackChange', index),
+});
+/** 处理播放/暂停 */
+function handleTogglePlay() {
+  emit('togglePlay');
+}
+
+/** 处理快进/快退 */
+function handleSeek(seconds: number) {
+  emit('seek', seconds);
+}
+
+/** 处理进度条变化 */
+function handleProgressChange(percent: number) {
+  emit('progressChange', percent);
+}
+
+/** 处理音量变化 */
+function handleVolumeChange(volume: number) {
+  emit('volumeChange', volume);
+}
+
+/** 处理切换静音 */
+function handleToggleMute() {
+  emit('toggleMute');
+}
+
+/** 处理切换画中画 */
+function handleTogglePiP() {
+  emit('togglePiP');
+}
+
+/** 处理切换全屏 */
+function handleToggleFullscreen() {
+  emit('toggleFullscreen');
+}
+
+/** 处理切换循环 */
+function handleToggleLoop() {
+  emit('toggleLoop');
+}
+
+function handleRestoreWindowRatio() {
+  emit('restoreWindowRatio');
+}
+
+/** 处理加载字幕 */
+function handleLoadSubtitle() {
+  emit('loadSubtitle');
+}
+
+function handleInteractionStart() {
+  emit('controlsInteractionStart');
+}
+
+function handleInteractionEnd() {
+  emit('controlsInteractionEnd');
+}
+
+function handleFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget;
+  if (next instanceof Node && event.currentTarget instanceof Node && event.currentTarget.contains(next)) {
+    return;
+  }
+  handleInteractionEnd();
+}
+</script>
+
+<style scoped>
+/* 控制栏 - 毛玻璃效果 */
+.controls {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  border-radius: 12px;
+  border: 1px solid var(--huyooo-border);
+  padding: 12px 16px;
+  box-shadow: var(--huyooo-shadow-lg);
+  -webkit-app-region: no-drag;
+}
+
+/* 控制栏滑入滑出动画 */
+.controls-slide-enter-active,
+.controls-slide-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.controls-slide-enter-from,
+.controls-slide-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+/* 第一行：进度条独占，时间在两侧 */
+.progress-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  margin-bottom: 10px;
+}
+
+.progress-row :deep(.progress-container) {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 第二行：左空白 | 播放控制居中 | 右侧工具 */
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.left-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.center-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.right-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  flex: 1;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tooltip {
+  position: absolute;
+  right: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(50%) translateY(4px);
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, #111 90%, transparent);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  box-shadow: var(--huyooo-shadow-lg);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  z-index: 10;
+}
+
+.tooltip-wrapper:hover .tooltip,
+.tooltip-wrapper:focus-within .tooltip {
+  opacity: 1;
+  transform: translateX(50%) translateY(0);
+}
+
+.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;
+}
+
+.btn-play {
+  width: 36px;
+  height: 36px;
+}
+
+.btn-play :deep(.iconify) {
+  font-size: 20px;
+}
+
+.btn.active {
+  color: var(--huyooo-primary);
+}
+
+/* 时间显示：等宽数字，固定最小宽度避免跳动 */
+.time {
+  color: var(--huyooo-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  min-width: 2.8em;
+}
+
+.time-current {
+  text-align: right;
+}
+
+.time-duration {
+  text-align: left;
+}
+</style>

package/src/components/ui/ProgressBar.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useSliderDrag } from '../../composables/useSliderDrag';
+import { formatTime } from '../../utils/time';
+
+const props = defineProps<{
+  /** 已播放百分比 (0-100) */
+  played: number;
+  /** 已缓冲百分比 (0-100) */
+  buffered?: number;
+  /** 总时长（秒），用于悬停预览 */
+  duration?: number;
+  /** 主色调 */
+  color?: string;
+}>();
+
+const emit = defineEmits<{
+  /** 进度变化事件，参数为百分比 (0-1) */
+  change: [percent: number];
+}>();
+
+const containerRef = ref<HTMLElement>();
+
+const { isDragging, handleMouseDown, handleTouchStart } = useSliderDrag({
+  getElement: () => containerRef.value,
+  onChange: (percent) => emit('change', percent),
+  thumbRadius: 7
+});
+
+const progressColor = computed(() => props.color || 'var(--huyooo-primary)');
+
+/** 悬停预览：根据 x 计算百分比 */
+function calcHoverPercent(clientX: number): number {
+  const el = containerRef.value;
+  if (!el) return 0;
+  const rect = el.getBoundingClientRect();
+  const thumbRadius = 7;
+  const trackWidth = rect.width - thumbRadius * 2;
+  const offsetX = clientX - rect.left - thumbRadius;
+  return Math.max(0, Math.min(1, offsetX / trackWidth));
+}
+
+const showPreview = ref(false);
+const previewTime = ref(0);
+const previewPercent = ref(0);
+
+function updatePreview(clientX: number) {
+  const dur = props.duration;
+  if (dur == null || !Number.isFinite(dur) || dur <= 0) return;
+  const percent = calcHoverPercent(clientX);
+  showPreview.value = true;
+  previewPercent.value = percent;
+  previewTime.value = percent * dur;
+}
+
+function handleMouseMove(e: MouseEvent) {
+  updatePreview(e.clientX);
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (e.touches.length > 0) updatePreview(e.touches[0].clientX);
+}
+
+function handleContainerTouchStart(e: TouchEvent) {
+  if (e.touches.length > 0) updatePreview(e.touches[0].clientX);
+  handleTouchStart(e);
+}
+
+function handlePointerLeave() {
+  showPreview.value = false;
+}
+
+const previewTimeFormatted = computed(() => formatTime(previewTime.value));
+</script>
+
+<template>
+  <div 
+    ref="containerRef"
+    class="progress-container" 
+    :class="{ dragging: isDragging }"
+    @mousedown="handleMouseDown"
+    @touchstart="handleContainerTouchStart"
+    @mousemove="handleMouseMove"
+    @touchmove="handleTouchMove"
+    @mouseleave="handlePointerLeave"
+    @touchend="handlePointerLeave"
+  >
+    <Transition name="fade">
+      <div
+        v-if="showPreview && duration != null && Number.isFinite(duration) && duration > 0"
+        class="progress-preview"
+        :style="{ left: previewPercent * 100 + '%' }"
+      >
+        {{ previewTimeFormatted }}
+      </div>
+    </Transition>
+    <div class="progress-bar">
+      <div 
+        v-if="buffered !== undefined"
+        class="progress-buffered" 
+        :style="{ width: buffered + '%' }"
+      />
+      <div 
+        class="progress-played" 
+        :style="{ width: played + '%', backgroundColor: progressColor }"
+      />
+      <div 
+        class="progress-thumb" 
+        :style="{ left: played + '%' }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.progress-container {
+  flex: 1;
+  min-width: 0;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 6px;
+  margin-left: -6px;
+  margin-right: -6px;
+  user-select: none;
+  position: relative;
+}
+
+.progress-preview {
+  position: absolute;
+  bottom: 100%;
+  transform: translate(-50%, -6px);
+  padding: 2px 6px;
+  font-size: 11px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--huyooo-on-primary, #fff);
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 3px;
+  background: color-mix(in srgb, var(--huyooo-text) 15%, transparent);
+  border-radius: 2px;
+  position: relative;
+  transition: height 0.15s;
+}
+
+.progress-container:hover .progress-bar,
+.progress-container.dragging .progress-bar {
+  height: 5px;
+}
+
+.progress-buffered {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: color-mix(in srgb, var(--huyooo-text) 25%, transparent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.progress-played {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: var(--huyooo-on-primary, #fff);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s;
+  box-shadow: var(--huyooo-shadow-sm);
+  pointer-events: none;
+}
+
+.progress-container:hover .progress-thumb,
+.progress-container.dragging .progress-thumb {
+  transform: translate(-50%, -50%) scale(1);
+}
+</style>
+