@huyooo/file-explorer-preview 0.4.29 → 0.4.30

package/src/composables/useAutoHideControls.ts

@@ -0,0 +1,70 @@
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * 控件自动隐藏 composable
+ * 用于全屏模式下自动隐藏控件
+ */
+export function useAutoHideControls(options: {
+  /** 隐藏延时（毫秒） */
+  delay?: number;
+  /** 是否启用（通常与全屏状态绑定） */
+  isEnabled: () => boolean;
+} = { delay: 2000, isEnabled: () => true }) {
+  const { delay = 2000, isEnabled } = options;
+  
+  const showControls = ref(true);
+  let hideTimer: number | undefined;
+  
+  /** 清除隐藏计时器 */
+  function clearHideTimer() {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = undefined;
+    }
+  }
+  
+  /** 重置隐藏计时器 */
+  function resetHideTimer() {
+    showControls.value = true;
+    clearHideTimer();
+    
+    if (isEnabled()) {
+      hideTimer = window.setTimeout(() => {
+        showControls.value = false;
+      }, delay);
+    }
+  }
+  
+  /** 强制显示控件 */
+  function showControlsNow() {
+    showControls.value = true;
+    clearHideTimer();
+  }
+  
+  /** 强制隐藏控件 */
+  function hideControlsNow() {
+    showControls.value = false;
+    clearHideTimer();
+  }
+  
+  /** 鼠标移动时重置计时器 */
+  function handleMouseMove() {
+    if (isEnabled()) {
+      resetHideTimer();
+    }
+  }
+  
+  onUnmounted(() => {
+    clearHideTimer();
+  });
+  
+  return {
+    showControls,
+    resetHideTimer,
+    clearHideTimer,
+    showControlsNow,
+    hideControlsNow,
+    handleMouseMove
+  };
+}
+

package/src/composables/useFullscreen.ts

@@ -0,0 +1,64 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * 全屏控制 composable
+ */
+export function useFullscreen(getElement: () => HTMLElement | undefined) {
+  const isFullscreen = ref(false);
+  
+  /** 切换全屏 */
+  async function toggleFullscreen() {
+    const el = getElement();
+    if (!el) return;
+    
+    if (!document.fullscreenElement) {
+      await el.requestFullscreen();
+    } else {
+      await document.exitFullscreen();
+    }
+  }
+  
+  /** 进入全屏 */
+  async function enterFullscreen() {
+    const el = getElement();
+    if (!el || document.fullscreenElement) return;
+    await el.requestFullscreen();
+  }
+  
+  /** 退出全屏 */
+  async function exitFullscreen() {
+    if (!document.fullscreenElement) return;
+    await document.exitFullscreen();
+  }
+  
+  /** 全屏变化回调 */
+  let onFullscreenChange: ((isFullscreen: boolean) => void) | undefined;
+  
+  /** 处理全屏变化事件 */
+  function handleFullscreenChange() {
+    isFullscreen.value = !!document.fullscreenElement;
+    onFullscreenChange?.(isFullscreen.value);
+  }
+  
+  /** 设置全屏变化回调 */
+  function setOnFullscreenChange(callback: (isFullscreen: boolean) => void) {
+    onFullscreenChange = callback;
+  }
+  
+  onMounted(() => {
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+  });
+  
+  onUnmounted(() => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  });
+  
+  return {
+    isFullscreen,
+    toggleFullscreen,
+    enterFullscreen,
+    exitFullscreen,
+    setOnFullscreenChange
+  };
+}
+

package/src/composables/useMediaPlayer.ts

@@ -0,0 +1,324 @@
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { formatTime, formatTimeDisplay } from '../utils/time';
+
+export interface UseMediaPlayerOptions {
+  initialVolume?: number;
+  initialMuted?: boolean;
+  initialPlaybackRate?: number;
+  initialLoop?: boolean;
+}
+
+/**
+ * 媒体播放器核心逻辑 composable
+ * 统一音频和视频播放器的通用逻辑
+ */
+export function useMediaPlayer(
+  getMediaElement: () => HTMLMediaElement | undefined,
+  options?: UseMediaPlayerOptions,
+) {
+  const vol = Math.max(0, Math.min(1, options?.initialVolume ?? 1));
+  const rate = Math.max(0.25, Math.min(4, options?.initialPlaybackRate ?? 1));
+  const initialLoop = options?.initialLoop ?? false;
+
+  // 状态
+  const isLoading = ref(true);
+  const hasError = ref(false);
+  const isPlaying = ref(false);
+  const isMuted = ref(options?.initialMuted ?? false);
+  const loop = ref(initialLoop);
+  const currentTime = ref(0);
+  const duration = ref(0);
+  const buffered = ref(0);
+  const volume = ref(vol);
+  const playbackRate = ref(rate);
+  
+  // 计算属性
+  const playedPercent = computed(() => 
+    duration.value ? (currentTime.value / duration.value) * 100 : 0
+  );
+  
+  const bufferedPercent = computed(() => 
+    duration.value ? (buffered.value / duration.value) * 100 : 0
+  );
+  
+  const timeDisplay = computed(() => 
+    formatTimeDisplay(currentTime.value, duration.value)
+  );
+  
+  // 可用的播放速度选项
+  const speedOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  
+  /** 播放/暂停切换；播完后点击播放会从头重播 */
+  function togglePlay() {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    if (media.paused) {
+      const dur = media.duration;
+      if (Number.isFinite(dur) && dur > 0 && media.currentTime >= dur - 0.01) {
+        media.currentTime = 0;
+        currentTime.value = 0;
+      }
+      void media.play();
+    } else {
+      media.pause();
+    }
+  }
+  
+  /** 播放 */
+  function play() {
+    const media = getMediaElement();
+    if (!media) return;
+    media.play();
+  }
+  
+  /** 暂停 */
+  function pause() {
+    const media = getMediaElement();
+    if (!media) return;
+    media.pause();
+  }
+  
+  /** 静音切换 */
+  function toggleMute() {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    media.muted = !media.muted;
+    isMuted.value = media.muted;
+  }
+
+  /** 设置静音状态（跨窗口同步时使用） */
+  function setMuted(value: boolean) {
+    const media = getMediaElement();
+    if (!media) return;
+    media.muted = value;
+    isMuted.value = value;
+  }
+  
+  /** 设置音量 */
+  function setVolume(value: number) {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    const clampedValue = Math.max(0, Math.min(1, value));
+    media.volume = clampedValue;
+    volume.value = clampedValue;
+    media.muted = false;
+    isMuted.value = false;
+  }
+  
+  /** 调整音量（增量） */
+  function adjustVolume(delta: number) {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    setVolume(media.volume + delta);
+  }
+  
+  /** 跳转到指定时间 */
+  function seekTo(time: number) {
+    const media = getMediaElement();
+    if (!media) return;
+    const clamped = Math.max(0, Math.min(duration.value, time));
+    media.currentTime = clamped;
+    currentTime.value = clamped;
+  }
+
+  /** 跳转到指定百分比位置 */
+  function seekToPercent(percent: number) {
+    seekTo(percent * duration.value);
+  }
+
+  /** 快进/快退 */
+  function seek(seconds: number) {
+    const media = getMediaElement();
+    if (!media) return;
+    media.currentTime += seconds;
+    currentTime.value = media.currentTime;
+  }
+  
+  /** 设置播放速度 */
+  function setSpeed(speed: number) {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    media.playbackRate = speed;
+    playbackRate.value = speed;
+  }
+
+  /** 设置单曲循环 */
+  function setLoop(value: boolean) {
+    const media = getMediaElement();
+    loop.value = value;
+    if (media) media.loop = value;
+  }
+
+  /** 切换单曲循环 */
+  function toggleLoop() {
+    setLoop(!loop.value);
+  }
+  
+  // 媒体事件处理
+  function handlePlay() {
+    isPlaying.value = true;
+  }
+  
+  function handlePause() {
+    isPlaying.value = false;
+  }
+  
+  /** 是否暂停时间更新（拖动进度条时使用） */
+  let pauseTimeUpdate = false;
+  
+  function setPauseTimeUpdate(value: boolean) {
+    pauseTimeUpdate = value;
+  }
+  
+  function handleTimeUpdate() {
+    if (pauseTimeUpdate) return;
+    
+    const media = getMediaElement();
+    if (!media) return;
+    
+    currentTime.value = media.currentTime;
+    
+    // 更新缓冲进度
+    if (media.buffered.length > 0) {
+      buffered.value = media.buffered.end(media.buffered.length - 1);
+    }
+  }
+  
+  function handleLoadedMetadata() {
+    const media = getMediaElement();
+    if (!media) return;
+    
+    duration.value = media.duration;
+    isLoading.value = false;
+  }
+  
+  function handleCanPlay() {
+    isLoading.value = false;
+  }
+  
+  function handleWaiting() {
+    isLoading.value = true;
+  }
+  
+  function handleError() {
+    isLoading.value = false;
+    hasError.value = true;
+  }
+  
+  /** 键盘快捷键处理（输入框内不拦截） */
+  function handleKeyDown(e: KeyboardEvent) {
+    const target = e.target as HTMLElement;
+    if (target?.closest('input, textarea, [contenteditable="true"]')) return;
+
+    switch (e.code) {
+      case 'Space':
+        e.preventDefault();
+        togglePlay();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        seek(-10);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        seek(10);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        adjustVolume(0.1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        adjustVolume(-0.1);
+        break;
+      case 'KeyM':
+        toggleMute();
+        break;
+      case 'KeyL':
+        toggleLoop();
+        break;
+    }
+  }
+  
+  /** 自动播放（失败时抛出，不吞错） */
+  function autoPlay() {
+    const media = getMediaElement();
+    if (media) void media.play();
+  }
+  
+  watch(
+    () => getMediaElement(),
+    (media) => {
+      if (media) {
+        media.volume = vol;
+        media.muted = options?.initialMuted ?? false;
+        media.playbackRate = rate;
+        media.loop = loop.value;
+      }
+    },
+    { immediate: true },
+  );
+
+  onMounted(() => {
+    document.addEventListener('keydown', handleKeyDown);
+  });
+  
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeyDown);
+  });
+  
+  return {
+    // 状态
+    isLoading,
+    hasError,
+    isPlaying,
+    isMuted,
+    currentTime,
+    duration,
+    buffered,
+    volume,
+    playbackRate,
+    loop,
+    
+    // 计算属性
+    playedPercent,
+    bufferedPercent,
+    timeDisplay,
+    speedOptions,
+    
+    // 方法
+    togglePlay,
+    play,
+    pause,
+    toggleMute,
+    setMuted,
+    setVolume,
+    adjustVolume,
+    seekTo,
+    seekToPercent,
+    seek,
+    setSpeed,
+    setLoop,
+    toggleLoop,
+    autoPlay,
+    setPauseTimeUpdate,
+    
+    // 事件处理器
+    handlePlay,
+    handlePause,
+    handleTimeUpdate,
+    handleLoadedMetadata,
+    handleCanPlay,
+    handleWaiting,
+    handleError,
+    
+    // 工具函数
+    formatTime
+  };
+}
+

package/src/composables/usePopupMenu.ts

@@ -0,0 +1,32 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+export function usePopupMenu() {
+  const showMenu = ref(false);
+
+  function openMenu() {
+    showMenu.value = true;
+  }
+
+  function closeMenu() {
+    showMenu.value = false;
+  }
+
+  function toggleMenu() {
+    showMenu.value = !showMenu.value;
+  }
+
+  onMounted(() => {
+    document.addEventListener('click', closeMenu);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('click', closeMenu);
+  });
+
+  return {
+    showMenu,
+    openMenu,
+    closeMenu,
+    toggleMenu,
+  };
+}

package/src/composables/useSliderDrag.ts

@@ -0,0 +1,103 @@
+import { ref, onUnmounted } from 'vue';
+
+/** 滑块方向 */
+export type SliderOrientation = 'horizontal' | 'vertical';
+
+export function useSliderDrag(options: {
+  /** 获取容器元素 */
+  getElement: () => HTMLElement | undefined;
+  /** 值变化回调 */
+  onChange: (percent: number) => void;
+  /** thumb 半径，用于计算边缘偏移 */
+  thumbRadius?: number;
+  /** 方向：horizontal 从左到右 0→1，vertical 从下到上 0→1 */
+  orientation?: SliderOrientation;
+}) {
+  const { getElement, onChange, thumbRadius = 0, orientation = 'horizontal' } = options;
+
+  const isDragging = ref(false);
+
+  /** 计算百分比：horizontal 左=0 右=1，vertical 下=0 上=1 */
+  function calcPercent(clientX: number, clientY: number): number {
+    const el = getElement();
+    if (!el) return 0;
+
+    const rect = el.getBoundingClientRect();
+    if (orientation === 'vertical') {
+      const trackHeight = rect.height - thumbRadius * 2;
+      const offsetY = rect.bottom - thumbRadius - clientY;
+      return Math.max(0, Math.min(1, offsetY / trackHeight));
+    }
+    const trackWidth = rect.width - thumbRadius * 2;
+    const offsetX = clientX - rect.left - thumbRadius;
+    return Math.max(0, Math.min(1, offsetX / trackWidth));
+  }
+
+  function updatePosition(clientX: number, clientY: number) {
+    const percent = calcPercent(clientX, clientY);
+    onChange(percent);
+  }
+
+  function startDrag(clientX: number, clientY: number) {
+    isDragging.value = true;
+    updatePosition(clientX, clientY);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd);
+  }
+
+  function endDrag() {
+    isDragging.value = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    e.preventDefault();
+    startDrag(e.clientX, e.clientY);
+  }
+
+  function handleTouchStart(e: TouchEvent) {
+    if (e.touches.length === 0) return;
+    e.preventDefault();
+    const t = e.touches[0];
+    startDrag(t.clientX, t.clientY);
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (!isDragging.value) return;
+    updatePosition(e.clientX, e.clientY);
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!isDragging.value || e.touches.length === 0) return;
+    e.preventDefault();
+    const t = e.touches[0];
+    updatePosition(t.clientX, t.clientY);
+  }
+
+  function handleMouseUp() {
+    endDrag();
+  }
+
+  function handleTouchEnd() {
+    endDrag();
+  }
+
+  function cleanup() {
+    endDrag();
+  }
+
+  onUnmounted(cleanup);
+
+  return {
+    isDragging,
+    handleMouseDown,
+    handleTouchStart,
+    cleanup,
+  };
+}
+

package/src/composables/useSubtitleTracks.ts

@@ -0,0 +1,78 @@
+import { computed, ref, watch, type Ref } from 'vue';
+import {
+  getCurrentCue,
+  inferLanguageFromFilename,
+  parseSubtitleByExtension,
+  type SubtitleCue,
+  type SubtitleTrack,
+} from '../utils/subtitle';
+
+export function useSubtitleTracks(currentTime: Ref<number>) {
+  const subtitleTracks = ref<SubtitleTrack[]>([]);
+  const currentTrackIndex = ref(-1);
+  const currentCue = ref<SubtitleCue | null>(null);
+
+  const currentTrack = computed(() =>
+    currentTrackIndex.value >= 0 ? subtitleTracks.value[currentTrackIndex.value] ?? null : null,
+  );
+
+  function updateCurrentCue() {
+    if (!currentTrack.value) {
+      currentCue.value = null;
+      return;
+    }
+
+    currentCue.value = getCurrentCue(currentTrack.value.cues, currentTime.value);
+  }
+
+  async function loadSubtitleFile() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.srt,.vtt,.ass,.ssa';
+    input.multiple = true;
+
+    input.onchange = async () => {
+      if (!input.files?.length) return;
+
+      for (const file of Array.from(input.files)) {
+        try {
+          const content = await file.text();
+          const extension = file.name.split('.').pop() || '';
+          const cues = parseSubtitleByExtension(content, extension);
+
+          if (cues.length === 0) continue;
+
+          const { label, language } = inferLanguageFromFilename(file.name);
+          subtitleTracks.value.push({
+            label: label || file.name,
+            language,
+            cues,
+          });
+
+          if (currentTrackIndex.value === -1) {
+            currentTrackIndex.value = 0;
+          }
+        } catch (error) {
+          console.error('加载字幕失败:', file.name, error);
+        }
+      }
+    };
+
+    input.click();
+  }
+
+  function setCurrentTrack(index: number) {
+    currentTrackIndex.value = index;
+  }
+
+  watch(() => currentTime.value, updateCurrentCue);
+  watch(currentTrackIndex, updateCurrentCue);
+
+  return {
+    subtitleTracks,
+    currentTrackIndex,
+    currentCue,
+    loadSubtitleFile,
+    setCurrentTrack,
+  };
+}