@huyooo/file-explorer-preview 0.4.29 → 0.4.30

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@huyooo/file-explorer-preview",
-  "version": "0.4.29",
-  "description": "Media preview window for File Explorer - supports image, video, and audio",
+  "version": "0.4.30",
+  "description": "Media preview components for File Explorer - ImageViewer, VideoPlayer, AudioPlayer",
   "type": "module",
-  "main": "./dist/index.html",
   "exports": {
-    ".": "./dist/index.html",
-    "./path": {
-      "types": "./dist/path.d.ts",
-      "import": "./dist/path.js"
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./components": {
+      "import": "./src/components/index.ts"
     }
   },
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
-    "build": "vite build && tsup",
-    "dev": "vite",
-    "preview": "vite preview",
+    "build": "npm run typecheck",
+    "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist"
   },
   "dependencies": {
@@ -26,11 +25,7 @@
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
-    "terser": "^5.44.1",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "typescript": "^5.0.0"
   },
   "keywords": [
     "file",
@@ -40,7 +35,8 @@
     "video",
     "audio",
     "image",
-    "electron"
+    "vue",
+    "component"
   ],
   "author": "huyooo",
   "license": "SEE LICENSE IN LICENSE",

package/src/MediaPreviewPage.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+/**
+ * 媒体预览页面（完整壳：标题栏 + 媒体组件）
+ *
+ * app 直接显示，媒体组件自带 loading，单一加载体验
+ *
+ * URL 参数：type=image|video|audio&url=...&name=...&platform=darwin|win32|linux
+ *
+ * 偏好：通过 mediaPreferences prop 传入，宿主应用负责从 DB 加载
+ */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ImageViewer, VideoPlayer, AudioPlayer } from './components/index'
+import { Icon } from '@iconify/vue'
+import { DEFAULT_PREVIEW_MEDIA_PREFERENCES, type PreviewMediaPreferences } from './types/previewMediaPreferences'
+
+const props = withDefaults(
+  defineProps<{
+    mediaPreferences?: PreviewMediaPreferences
+  }>(),
+  { mediaPreferences: () => DEFAULT_PREVIEW_MEDIA_PREFERENCES },
+)
+
+const prefs = computed(() => props.mediaPreferences ?? DEFAULT_PREVIEW_MEDIA_PREFERENCES)
+
+type MediaType = 'image' | 'video' | 'audio'
+type Platform = 'darwin' | 'win32' | 'linux'
+
+const emit = defineEmits<{
+  ready: []
+  'update:imageFitMode': [value: 'fit' | 'actual']
+  'update:volume': [value: number]
+  'update:muted': [value: boolean]
+  'update:playbackRate': [value: number]
+  'update:loop': [value: boolean]
+}>()
+
+const mediaType = ref<MediaType>('video')
+const fileUrl = ref('')
+const fileName = ref('')
+const paramsError = ref('')
+const platform = ref<Platform>('darwin')
+const isMaximized = ref(false)
+const readyEmitted = ref(false)
+
+const isMac = computed(() => platform.value === 'darwin')
+const isWindows = computed(() => platform.value === 'win32')
+
+function emitReady() {
+  if (readyEmitted.value) return
+  readyEmitted.value = true
+  emit('ready')
+}
+
+function minimizeWindow() {
+  window.electronAPI?.minimizeWindow?.()
+}
+
+function toggleMaximize() {
+  window.electronAPI?.toggleMaximizeWindow?.()
+}
+
+function closeWindow() {
+  window.electronAPI?.closeWindow?.()
+}
+
+function ensureMediaUrl(urlOrPath: string): string {
+  if (urlOrPath.startsWith('app://') || urlOrPath.startsWith('file://')) return urlOrPath
+  const segments = urlOrPath.split('/').map((s) => encodeURIComponent(s))
+  return `app://file${segments.join('/')}`
+}
+
+let unsubscribeMaximize: (() => void) | undefined
+
+onMounted(() => {
+  const params = new URLSearchParams(window.location.search)
+  const type = params.get('type')
+  const url = params.get('url')
+  const name = params.get('name')
+  const platformParam = params.get('platform')
+
+  document.documentElement.setAttribute('data-theme', 'dark')
+
+  if (!type || !['image', 'video', 'audio'].includes(type) || !url) {
+    paramsError.value = '参数错误：缺少必要的媒体信息'
+    emitReady()
+    return
+  }
+
+  mediaType.value = type as MediaType
+  fileUrl.value = ensureMediaUrl(decodeURIComponent(url))
+  fileName.value = name ? decodeURIComponent(name) : '未知文件'
+  platform.value = (['darwin', 'win32', 'linux'].includes(platformParam ?? '') ? platformParam : 'darwin') as Platform
+  document.title = fileName.value
+
+  unsubscribeMaximize = window.electronAPI?.onMaximizeChange?.((maximized: boolean) => {
+    isMaximized.value = maximized
+  })
+})
+
+onUnmounted(() => {
+  unsubscribeMaximize?.()
+})
+
+function handleMediaLoaded() {
+  emitReady()
+}
+</script>
+
+<template>
+  <div class="preview-app" :class="{ 'platform-mac': isMac, 'platform-windows': isWindows }">
+    <!-- 标题栏 -->
+    <div class="titlebar" :class="{ 'titlebar-mac': isMac, 'titlebar-windows': isWindows }">
+      <div v-if="isMac" class="titlebar-content mac">
+        <span class="window-title">{{ fileName }}</span>
+      </div>
+      <div v-else class="titlebar-content windows">
+        <span class="window-title">{{ fileName }}</span>
+        <div class="window-controls">
+          <button class="control-btn minimize" @click="minimizeWindow" title="最小化">
+            <Icon icon="lucide:minus" />
+          </button>
+          <button class="control-btn maximize" @click="toggleMaximize" :title="isMaximized ? '还原' : '最大化'">
+            <Icon :icon="isMaximized ? 'lucide:square' : 'lucide:maximize'" />
+          </button>
+          <button class="control-btn close" @click="closeWindow" title="关闭">
+            <Icon icon="lucide:x" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 参数错误 -->
+    <div v-if="paramsError" class="error-state">
+      <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>{{ paramsError }}</p>
+    </div>
+
+    <!-- 内容区：媒体组件自带 loading -->
+    <div v-else class="content-area">
+      <div class="media-container">
+        <ImageViewer v-if="mediaType === 'image'" :url="fileUrl" :name="fileName"
+          :initial-image-fit-mode="prefs.imageFitMode"
+          @loaded="handleMediaLoaded"
+          @update:image-fit-mode="(v) => emit('update:imageFitMode', v)" />
+        <VideoPlayer v-else-if="mediaType === 'video'" :url="fileUrl" :name="fileName"
+          :initial-volume="prefs.volume" :initial-muted="prefs.muted" :initial-playback-rate="prefs.playbackRate"
+          :initial-loop="prefs.loop ?? false"
+          @loaded="handleMediaLoaded"
+          @update:volume="(v) => emit('update:volume', v)"
+          @update:muted="(v) => emit('update:muted', v)"
+          @update:playback-rate="(v) => emit('update:playbackRate', v)"
+          @update:loop="(v) => emit('update:loop', v)" />
+        <AudioPlayer v-else :url="fileUrl" :name="fileName"
+          :initial-volume="prefs.volume" :initial-muted="prefs.muted" :initial-playback-rate="prefs.playbackRate"
+          :initial-loop="prefs.loop ?? false"
+          @loaded="handleMediaLoaded"
+          @update:volume="(v) => emit('update:volume', v)"
+          @update:muted="(v) => emit('update:muted', v)"
+          @update:playback-rate="(v) => emit('update:playbackRate', v)"
+          @update:loop="(v) => emit('update:loop', v)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 预览窗口固定暗色主题 token */
+.preview-app {
+  --huyooo-bg: #000000;
+  --huyooo-surface: #000000;
+  --huyooo-surface-2: #252526;
+  --huyooo-muted: #2d2d2d;
+  --huyooo-muted-hover: #3c3c3c;
+  --huyooo-border: #333;
+  --huyooo-text: #ccc;
+  --huyooo-text-muted: #888;
+  --huyooo-text-disabled: #666;
+  --huyooo-on-primary: #ffffff;
+  --huyooo-on-primary-muted: rgba(255, 255, 255, 0.8);
+  --huyooo-primary: #2563eb;
+  --huyooo-focus-ring: rgba(37, 99, 235, 0.18);
+  --huyooo-scrollbar: rgba(255, 255, 255, 0.2);
+  --huyooo-scrollbar-hover: rgba(255, 255, 255, 0.3);
+  --huyooo-overlay: rgba(0, 0, 0, 0.6);
+  --huyooo-overlay-strong: rgba(0, 0, 0, 0.85);
+  --huyooo-panel-bg: #252526;
+  --huyooo-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
+  --huyooo-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --huyooo-danger: #ef4444;
+  --huyooo-success: #22c55e;
+  --huyooo-warning: #f59e0b;
+  --huyooo-win-close-hover: #e81123;
+  --huyooo-win-close-active: #bf0f1d;
+
+  width: 100%;
+  min-width: 720px;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--huyooo-bg);
+  color: var(--huyooo-text);
+  overflow: hidden;
+  user-select: none;
+  color-scheme: dark;
+}
+
+/* ========================
+   标题栏
+   ======================== */
+.titlebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  -webkit-app-region: drag;
+  background: var(--huyooo-panel-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--huyooo-border);
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.window-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--huyooo-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.titlebar-mac {
+  height: 38px;
+}
+
+.titlebar-content.mac {
+  justify-content: center;
+  padding-left: 80px;
+  padding-right: 80px;
+}
+
+.titlebar-mac .window-title {
+  max-width: 300px;
+}
+
+.titlebar-windows {
+  height: 32px;
+}
+
+.titlebar-content.windows {
+  justify-content: space-between;
+  padding-left: 12px;
+}
+
+.titlebar-windows .window-title {
+  max-width: 400px;
+}
+
+.window-controls {
+  display: flex;
+  height: 100%;
+  -webkit-app-region: no-drag;
+}
+
+.control-btn {
+  width: 46px;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--huyooo-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  font-size: 16px;
+}
+
+.control-btn:hover {
+  background: var(--huyooo-muted-hover);
+  color: var(--huyooo-text);
+}
+
+.control-btn.close:hover {
+  background: var(--huyooo-win-close-hover);
+  color: var(--huyooo-on-primary);
+}
+
+.control-btn:active {
+  background: var(--huyooo-muted);
+}
+
+.control-btn.close:active {
+  background: var(--huyooo-win-close-active);
+}
+
+/* ========================
+   内容区域
+   ======================== */
+.content-area,
+.error-state {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding-top: 38px;
+  overflow: hidden;
+  position: relative;
+}
+
+.platform-windows .content-area,
+.platform-windows .error-state {
+  padding-top: 32px;
+}
+
+.media-container {
+  position: absolute;
+  inset: 0;
+}
+
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.error-state svg {
+  width: 48px;
+  height: 48px;
+  color: var(--huyooo-danger);
+}
+
+.error-state p {
+  color: var(--huyooo-text);
+  font-size: 14px;
+}
+</style>

package/src/components/AudioPlayer.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import { useMediaPlayer } from '../composables/useMediaPlayer';
+import { useFullscreen } from '../composables/useFullscreen';
+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: [];
+  'update:volume': [value: number];
+  'update:muted': [value: boolean];
+  'update:playbackRate': [value: number];
+  'update:loop': [value: boolean];
+}>();
+
+const audioRef = ref<HTMLAudioElement>();
+const playerRef = ref<HTMLDivElement>();
+
+// 使用媒体播放器 composable
+const media = useMediaPlayer(() => audioRef.value, {
+  initialVolume: props.initialVolume,
+  initialMuted: props.initialMuted,
+  initialPlaybackRate: props.initialPlaybackRate,
+  initialLoop: props.initialLoop,
+});
+
+const { isFullscreen, toggleFullscreen } = useFullscreen(() => playerRef.value);
+
+// 跨窗口同步：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);
+  },
+);
+
+/** 进度条变化 */
+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 handlePlayerDoubleClick(e: MouseEvent) {
+  const target = e.target;
+  if (target instanceof Element && target.closest('.controls-wrapper')) return;
+  void toggleFullscreen();
+}
+
+/** 媒体就绪时通知父组件（骨架屏关闭） */
+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 },
+);
+
+/** 宿主在窗口可见时派发，此时播放可绕过 Chromium 后台节流；宿主必须派发，否则不自动播放 */
+const PREVIEW_READY_EVENT = 'preview-ready-to-show';
+
+onMounted(() => {
+  const playOnce = () => media.autoPlay();
+  window.addEventListener(PREVIEW_READY_EVENT, playOnce);
+  onUnmounted(() => window.removeEventListener(PREVIEW_READY_EVENT, playOnce));
+});
+</script>
+
+<template>
+  <div
+    ref="playerRef"
+    class="player"
+    :class="{ playing: media.isPlaying.value, fullscreen: isFullscreen }"
+    @dblclick="handlePlayerDoubleClick"
+  >
+    <!-- 背景动画 -->
+    <div class="bg-animation" />
+    
+    <!-- 音频元素 -->
+    <audio 
+      ref="audioRef"
+      :src="url"
+      preload="metadata"
+      @play="media.handlePlay"
+      @pause="media.handlePause"
+      @timeupdate="media.handleTimeUpdate"
+      @loadedmetadata="media.handleLoadedMetadata"
+      @canplay="media.handleCanPlay"
+      @waiting="media.handleWaiting"
+      @error="media.handleError"
+    />
+    
+    <!-- 内容区域 -->
+    <div class="content">
+      <div class="cover">
+        <Icon icon="lucide:music-2" />
+      </div>
+      <p class="title">{{ name }}</p>
+      <p class="subtitle">音频文件</p>
+    </div>
+    
+    <!-- 控制区域 -->
+    <div class="controls-wrapper">
+      <PlayerControls
+        :show-controls="true"
+        :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="false"
+        :show-pi-p="false"
+        :show-fullscreen="true"
+        :loop="media.loop.value"
+        @toggle-play="media.togglePlay"
+        @seek="media.seek"
+        @progress-change="handleProgressChange"
+        @volume-change="handleVolumeChange"
+        @toggle-mute="handleMuteToggle"
+        @speed-change="handleSpeedChange"
+        @toggle-fullscreen="toggleFullscreen"
+        @toggle-loop="handleLoopToggle"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.player {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景动画 */
+.bg-animation {
+  position: absolute;
+  inset: 0;
+  display: none;
+}
+
+@keyframes bgPulse {
+  0%, 100% { transform: scale(1); opacity: 0.4; }
+  50% { transform: scale(1.1); opacity: 0.6; }
+}
+
+.player.playing .bg-animation {
+  animation: bgPulseActive 2s ease-in-out infinite;
+}
+
+@keyframes bgPulseActive {
+  0%, 100% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.15); opacity: 0.8; }
+}
+
+/* 内容区域 */
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* 使用响应式 padding，确保最小间距，不会贴边 */
+  padding: clamp(20px, 5vw, 40px) clamp(24px, 6vw, 40px);
+  position: relative;
+  z-index: 1;
+  min-height: 0; /* 允许 flex 子元素缩小 */
+}
+
+/* 封面图标 */
+.cover {
+  /* 响应式大小，根据窗口大小自适应 */
+  width: clamp(120px, min(25vw, 25vh), 180px);
+  height: clamp(120px, min(25vw, 25vh), 180px);
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--huyooo-primary) 85%, #ec4899 15%) 0%,
+    color-mix(in srgb, var(--huyooo-primary) 65%, #8b5cf6 35%) 50%,
+    var(--huyooo-primary) 100%
+  );
+  border-radius: clamp(24px, 6vw, 36px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 25px 80px color-mix(in srgb, var(--huyooo-primary) 40%, transparent),
+    0 10px 40px color-mix(in srgb, var(--huyooo-overlay) 50%, transparent);
+  margin-bottom: clamp(16px, 4vw, 32px);
+  transition: transform 0.3s, box-shadow 0.3s;
+  flex-shrink: 0; /* 防止被压缩 */
+}
+
+.player.playing .cover {
+  animation: coverPulse 2s ease-in-out infinite;
+}
+
+@keyframes coverPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+}
+
+.cover :deep(.iconify) {
+  /* 响应式图标大小，相对于封面大小 */
+  width: 44%;
+  height: 44%;
+  max-width: 80px;
+  max-height: 80px;
+  font-size: 80px;
+  color: var(--huyooo-on-primary, #ffffff);
+}
+
+/* 文件名 */
+.title {
+  color: var(--huyooo-text);
+  font-size: clamp(14px, 2.5vw, 18px);
+  font-weight: 600;
+  text-align: center;
+  /* 确保有足够的边距，不会贴边 */
+  max-width: min(90%, calc(100% - 48px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: clamp(10px, 2.5vw, 16px);
+  padding: 0 clamp(12px, 3vw, 0);
+}
+
+.subtitle {
+  color: var(--huyooo-text-muted);
+  font-size: clamp(11px, 2vw, 13px);
+  padding: 0 clamp(12px, 3vw, 0);
+}
+
+/* 控制区域 */
+.controls-wrapper {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  padding: 0 clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px);
+  flex-shrink: 0; /* 防止被压缩 */
+}
+</style>