@huyooo/file-explorer-preview 0.4.29 → 0.4.30

package/src/components/VideoPlayer.vue

@@ -0,0 +1,436 @@
+<template>
+  <div 
+    ref="playerRef"
+    class="player" 
+    :class="{ 
+      fullscreen: isFullscreen,
+      'hide-cursor': !showControls
+    }"
+    @mousemove="handleMouseMove"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- 视频元素 -->
+    <video 
+      ref="videoRef"
+      :src="url"
+      preload="metadata"
+      @play="media.handlePlay"
+      @pause="media.handlePause"
+      @timeupdate="media.handleTimeUpdate"
+      @loadedmetadata="handleLoadedMetadata"
+      @canplay="media.handleCanPlay"
+      @waiting="media.handleWaiting"
+      @error="media.handleError"
+      @click="handleVideoClick"
+      @dblclick="handleVideoDoubleClick"
+    />
+    
+    <!-- 加载指示器 -->
+    <div v-if="media.isLoading.value && !media.hasError.value" class="loader" />
+    
+    <!-- 播放大按钮 -->
+    <Transition name="fade">
+      <div v-if="!media.isPlaying.value && !media.hasError.value" class="big-play">
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </div>
+    </Transition>
+    
+    <!-- 错误状态 -->
+    <div v-if="media.hasError.value" class="error-overlay">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="15" y1="9" x2="9" y2="15"/>
+        <line x1="9" y1="9" x2="15" y2="15"/>
+      </svg>
+      <p>无法播放此视频</p>
+    </div>
+    
+    <!-- 字幕显示 -->
+    <SubtitleOverlay
+      :cue="currentCue"
+      :visible="currentTrackIndex >= 0"
+    />
+    
+    <!-- 控制栏 -->
+    <PlayerControls
+      :show-controls="showControls"
+      :has-error="media.hasError.value"
+      :is-playing="media.isPlaying.value"
+      :is-muted="media.isMuted.value"
+      :current-time="media.currentTime.value"
+      :duration="media.duration.value"
+      :played-percent="media.playedPercent.value"
+      :buffered-percent="media.bufferedPercent.value"
+      :volume="media.volume.value"
+      :playback-rate="media.playbackRate.value"
+      :is-fullscreen="isFullscreen"
+      :show-subtitle="true"
+      :show-pi-p="true"
+      :show-fullscreen="true"
+      :show-restore-window-ratio="true"
+      :subtitle-tracks="subtitleTracks"
+      :current-track-index="currentTrackIndex"
+      :loop="media.loop.value"
+      @toggle-play="media.togglePlay"
+      @seek="media.seek"
+      @progress-change="handleProgressChange"
+      @volume-change="handleVolumeChange"
+      @toggle-mute="handleMuteToggle"
+      @speed-change="handleSpeedChange"
+      @toggle-pi-p="togglePiP"
+      @toggle-fullscreen="toggleFullscreen"
+      @toggle-loop="handleLoopToggle"
+      @track-change="setCurrentTrack"
+      @load-subtitle="loadSubtitleFile"
+      @restore-window-ratio="requestRestoreWindowRatio"
+      @controls-interaction-start="handleControlsInteractionStart"
+      @controls-interaction-end="handleControlsInteractionEnd"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { useMediaPlayer } from '../composables/useMediaPlayer';
+import { useFullscreen } from '../composables/useFullscreen';
+import { useSubtitleTracks } from '../composables/useSubtitleTracks';
+import { useVideoInteraction } from '../composables/useVideoInteraction';
+import SubtitleOverlay from './ui/SubtitleOverlay.vue';
+import PlayerControls from './ui/PlayerControls.vue';
+
+const props = withDefaults(
+  defineProps<{
+    url: string;
+    name: string;
+    initialVolume?: number;
+    initialMuted?: boolean;
+    initialPlaybackRate?: number;
+    initialLoop?: boolean;
+  }>(),
+  { initialVolume: 1, initialMuted: false, initialPlaybackRate: 1, initialLoop: false },
+);
+
+const emit = defineEmits<{
+  loaded: [];
+  metadata: [value: { width: number; height: number; duration: number }];
+  'update:volume': [value: number];
+  'update:muted': [value: boolean];
+  'update:playbackRate': [value: number];
+  'update:loop': [value: boolean];
+  restoreWindowRatio: [value: { width: number; height: number; duration: number }];
+}>();
+
+const playerRef = ref<HTMLDivElement>();
+const videoRef = ref<HTMLVideoElement>();
+const naturalVideoWidth = ref(0);
+const naturalVideoHeight = ref(0);
+const naturalVideoDuration = ref(0);
+
+// 使用媒体播放器 composable
+const media = useMediaPlayer(() => videoRef.value, {
+  initialVolume: props.initialVolume,
+  initialMuted: props.initialMuted,
+  initialPlaybackRate: props.initialPlaybackRate,
+  initialLoop: props.initialLoop,
+});
+
+// 跨窗口同步：props 变化时同步到播放器
+watch(
+  () => [props.initialVolume, props.initialMuted, props.initialPlaybackRate, props.initialLoop] as const,
+  ([vol, mut, rate, loopVal]) => {
+    if (vol !== undefined) media.setVolume(vol);
+    if (mut !== undefined) media.setMuted(mut);
+    if (rate !== undefined) media.setSpeed(rate);
+    if (loopVal !== undefined) media.setLoop(loopVal);
+  },
+);
+
+// 使用全屏 composable
+const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen(() => playerRef.value);
+
+const {
+  subtitleTracks,
+  currentTrackIndex,
+  currentCue,
+  loadSubtitleFile,
+  setCurrentTrack,
+} = useSubtitleTracks(media.currentTime);
+
+const {
+  showControls,
+  revealControls,
+  handleMouseMove,
+  handleMouseLeave,
+  handleControlsInteractionStart,
+  handleControlsInteractionEnd,
+  handleVideoClick,
+  handleVideoDoubleClick,
+} = useVideoInteraction({
+  isPlaying: media.isPlaying,
+  togglePlay: media.togglePlay,
+  toggleFullscreen,
+});
+
+// Electron API 类型在 types/electron.d.ts 中定义
+
+/** 媒体就绪时通知父组件（骨架屏关闭） */
+const hasEmittedLoaded = ref(false);
+watch(
+  () => [media.isLoading.value, media.hasError.value] as const,
+  ([loading, error]) => {
+    if ((!loading || error) && !hasEmittedLoaded.value) {
+      hasEmittedLoaded.value = true;
+      emit('loaded');
+    }
+  },
+  { immediate: true },
+);
+
+function handleLoadedMetadata() {
+  media.handleLoadedMetadata()
+  if (!videoRef.value) return
+  naturalVideoWidth.value = videoRef.value.videoWidth;
+  naturalVideoHeight.value = videoRef.value.videoHeight;
+  naturalVideoDuration.value = videoRef.value.duration;
+  emit('metadata', {
+    width: videoRef.value.videoWidth,
+    height: videoRef.value.videoHeight,
+    duration: videoRef.value.duration,
+  })
+}
+
+/** 画中画 */
+async function togglePiP() {
+  if (!videoRef.value) return;
+  try {
+    if (document.pictureInPictureElement) {
+      await document.exitPictureInPicture();
+    } else {
+      await videoRef.value.requestPictureInPicture();
+    }
+  } catch (err) {
+    console.warn('画中画操作失败:', err);
+  }
+}
+
+/** 处理画中画进入 */
+function handlePiPEnter() {
+  // 进入画中画时隐藏主窗口
+  if (window.electronAPI?.hideWindow) {
+    window.electronAPI.hideWindow();
+  }
+}
+
+/** 处理画中画退出 */
+function handlePiPLeave() {
+  // 退出画中画时显示主窗口
+  if (window.electronAPI?.showWindow) {
+    window.electronAPI.showWindow();
+  }
+}
+
+/** 键盘事件扩展（F/P 需阻止默认避免页面行为） */
+function handleKeyDown(e: KeyboardEvent) {
+  const target = e.target as HTMLElement;
+  if (target?.closest('input, textarea, [contenteditable="true"]')) return;
+
+  switch (e.code) {
+    case 'Space':
+    case 'ArrowLeft':
+    case 'ArrowRight':
+    case 'ArrowUp':
+    case 'ArrowDown':
+    case 'KeyM':
+    case 'KeyL':
+      revealControls();
+      break;
+    case 'KeyF':
+      e.preventDefault();
+      revealControls();
+      toggleFullscreen();
+      break;
+    case 'KeyP':
+      e.preventDefault();
+      revealControls();
+      togglePiP();
+      break;
+    case 'Escape':
+      revealControls();
+      if (isFullscreen.value) {
+        e.preventDefault();
+        exitFullscreen();
+      }
+      break;
+  }
+}
+
+/** 进度条变化 */
+function handleProgressChange(percent: number) {
+  media.setPauseTimeUpdate(true);
+  media.seekToPercent(percent);
+  setTimeout(() => media.setPauseTimeUpdate(false), 100);
+}
+
+/** 音量变化（拖拽时 setVolume 会取消静音） */
+function handleVolumeChange(volume: number) {
+  media.setVolume(volume);
+  emit('update:volume', media.volume.value);
+  emit('update:muted', media.isMuted.value);
+}
+
+/** 静音切换 */
+function handleMuteToggle() {
+  media.toggleMute();
+  emit('update:muted', media.isMuted.value);
+}
+
+/** 速度变化 */
+function handleSpeedChange(speed: number) {
+  media.setSpeed(speed);
+  emit('update:playbackRate', media.playbackRate.value);
+}
+
+/** 循环切换 */
+function handleLoopToggle() {
+  media.toggleLoop();
+  emit('update:loop', media.loop.value);
+}
+
+function requestRestoreWindowRatio() {
+  if (!naturalVideoWidth.value || !naturalVideoHeight.value) return;
+  revealControls();
+  emit('restoreWindowRatio', {
+    width: naturalVideoWidth.value,
+    height: naturalVideoHeight.value,
+    duration: naturalVideoDuration.value,
+  });
+}
+
+/** 宿主在窗口可见时派发，此时播放可绕过 Chromium 后台节流；宿主必须派发，否则不自动播放 */
+const PREVIEW_READY_EVENT = 'preview-ready-to-show';
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown);
+  videoRef.value?.addEventListener('enterpictureinpicture', handlePiPEnter);
+  videoRef.value?.addEventListener('leavepictureinpicture', handlePiPLeave);
+  const playOnce = () => media.autoPlay();
+  window.addEventListener(PREVIEW_READY_EVENT, playOnce);
+  onUnmounted(() => window.removeEventListener(PREVIEW_READY_EVENT, playOnce));
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown);
+  videoRef.value?.removeEventListener('enterpictureinpicture', handlePiPEnter);
+  videoRef.value?.removeEventListener('leavepictureinpicture', handlePiPLeave);
+});
+</script>
+
+
+
+<style scoped>
+.player {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+/* 隐藏光标 */
+.player.hide-cursor {
+  cursor: none;
+}
+
+video {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  object-fit: contain;
+  display: block;
+}
+
+.player.fullscreen video {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+}
+
+/* 加载指示器 */
+.loader {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border: 3px solid color-mix(in srgb, var(--huyooo-text) 15%, transparent);
+  border-top-color: var(--huyooo-text);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 播放大按钮 */
+.big-play {
+  position: absolute;
+  width: 72px;
+  height: 72px;
+  background: var(--huyooo-overlay);
+  backdrop-filter: blur(8px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.big-play svg {
+  width: 32px;
+  height: 32px;
+  fill: var(--huyooo-on-primary, #fff);
+  margin-left: 3px;
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 错误状态 */
+.error-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: color-mix(in srgb, var(--huyooo-overlay) 90%, transparent);
+}
+
+.error-overlay svg {
+  width: 48px;
+  height: 48px;
+  color: var(--huyooo-danger);
+}
+
+.error-overlay p {
+  color: var(--huyooo-text);
+  font-size: 14px;
+}
+
+</style>

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as ImageViewer } from './ImageViewer.vue';
+export { default as VideoPlayer } from './VideoPlayer.vue';
+export { default as AudioPlayer } from './AudioPlayer.vue';