add video

docs/.vitepress/config.mts

@@ -4,15 +4,26 @@ import { execSync } from "node:child_process";
 const host = process.env.TAURI_DEV_HOST;
 
 const {
-  IMG_ORIGIN = `https://git.polv.cc/polv/yt2press/raw/branch/${
-    execSync("git branch --show-current").toString().trimEnd()
-  }/docs/public`,
+  IMG_ORIGIN = `https://git.polv.cc/polv/yt2press/raw/branch/${execSync(
+    "git branch --show-current",
+  )
+    .toString()
+    .trimEnd()}/docs/public`,
 } = process.env;
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "yt2press",
   description: "video to vitepress",
+  head: [
+    [
+      "script",
+      {
+        async: "async",
+        src: "https://www.youtube.com/iframe_api",
+      },
+    ],
+  ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [{ text: "Home", link: "/" }],

docs/.vitepress/theme/components/Video.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div :class="$style.container">
-      <YouTube v-if="youtubeID" :id="youtubeID" />
+      <YouTube ref="yt" v-if="youtubeID" :id="youtubeID" />
       <video
         v-else-if="videoURL"
         controls
@@ -15,12 +15,13 @@
 
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { computed, ref, useTemplateRef, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
 import YouTube from "./YouTube.vue";
 
 const { frontmatter } = useData<{ video?: string }>();
 const videoURL = computed(() => frontmatter.value?.video);
 const videoEl = useTemplateRef("video");
+const ytEl = useTemplateRef("yt");
 
 const youtubeID = ref("");
 
@@ -41,14 +42,15 @@ function imgClickListener(ev: PointerEvent) {
   if (!(ev.target instanceof HTMLImageElement)) return;
   const img = ev.target;
 
-  if (!videoEl.value) return;
-  const v = videoEl.value;
-
   const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || [];
   const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null;
   if (!t) return;
 
-  v.currentTime = t;
+  if (videoEl.value) {
+    videoEl.value.currentTime = t;
+  } else if (ytEl.value) {
+    ytEl.value.seekTo(t);
+  }
 }
 
 watch(videoURL, () => {
@@ -60,12 +62,38 @@ function onVideoNotFound() {
   youtubeID.value = m[1] || "";
 }
 
-//@ts-ignore
-const { SSR } = import.meta.env;
+function onOrientationChanged() {
+  if (window.screen.orientation.type.startsWith("landscape")) {
+    if (videoEl.value) {
+      videoEl.value.requestFullscreen();
+      return;
+    } else if (ytEl.value) {
+      ytEl.value.requestFullscreen();
+      return;
+    }
+  }
 
-if (!SSR) {
-  setTimeout(() => setImgClick(), 500);
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  }
 }
+
+onMounted(() => {
+  setTimeout(() => setImgClick(), 500);
+
+  if (window.screen?.orientation) {
+    window.screen.orientation.addEventListener("change", onOrientationChanged);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (window.screen?.orientation) {
+    window.screen.orientation.removeEventListener("change", onOrientationChanged);
+  }
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+});
 </script>
 
 <style module>

docs/.vitepress/theme/components/YouTube.vue

@@ -1,10 +1,12 @@
 <template>
   <div :class="$style.container">
     <iframe
+      id="yt-player"
+      ref="iframe"
       :class="$style.iframe"
       width="100%"
       height="100%"
-      :src="'https://www.youtube.com/embed/' + $props.id"
+      :src="url.href"
       frameborder="0"
       allow="
         accelerometer;
@@ -20,7 +22,36 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ id: string; title?: string }>();
+import { onMounted, ref, useTemplateRef } from "vue";
+
+const props = defineProps<{ id: string; title?: string }>();
+
+defineExpose({ seekTo, requestFullscreen });
+
+const url = new URL("https://www.youtube.com/embed/" + props.id);
+url.searchParams.set("enablejsapi", "1");
+
+const player = ref();
+const iframe = useTemplateRef("iframe");
+
+onMounted(() => {
+  const { YT } = window as any;
+  if (YT?.Player && iframe.value) {
+    player.value = new YT.Player(iframe.value);
+  }
+});
+
+function seekTo(t: number) {
+  if (player.value) {
+    player.value.seekTo(t, true);
+  }
+}
+
+function requestFullscreen() {
+  if (iframe.value) {
+    iframe.value.requestFullscreen();
+  }
+}
 </script>
 
 <style module>

docs/.vitepress/theme/custom.css

@@ -0,0 +1,6 @@
+/* body {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+} */

docs/.vitepress/theme/index.ts

@@ -1,3 +1,5 @@
+import "./custom.css";
+
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import { h } from 'vue'

docs/index.md

@@ -9,6 +9,21 @@ hero:
 
 <Downloader />
 
+- [HTC三次押中科技革命，為何三次都替別人賺了大錢？｜從台灣股王到被Google兩度帶走核心團隊](./HTC三次押中科技革命，為何三次都替別人賺了大錢？｜從台灣股王到被Google兩度帶走核心團隊.md)
+- [茅台最怕的，不是競爭對手，而是中國年輕人！曾經一瓶難求的白酒，神話還能撐多久？](./茅台最怕的，不是競爭對手，而是中國年輕人！曾經一瓶難求的白酒，神話還能撐多久？.md)
+- [沃爾瑪抄走一切，為什麼還是打不過好市多？Costco 最反常識的商業秘密！](./沃爾瑪抄走一切，為什麼還是打不過好市多？Costco_最反常識的商業秘密！.md)
+- [辛拉麵背後：財閥、媒體與國家，如何一步步設計你的泡麵選擇](./辛拉麵背後：財閥、媒體與國家，如何一步步設計你的泡麵選擇.md)
+- [一家輪胎公司，為什麼能決定全世界廚師的命運？｜米其林：一本虧錢百年的生死簿](./一家輪胎公司，為什麼能決定全世界廚師的命運？｜米其林：一本虧錢百年的生死簿.md)
+- [日清差點把杯麵做死，卻被一場持槍劫案救活｜一杯泡麵如何賣遍全球？](./日清差點把杯麵做死，卻被一場持槍劫案救活｜一杯泡麵如何賣遍全球？.md)
+- [柯達破產14年后，竟靠一件T恤還魂，年入10億美金...](./柯達破產14年后，竟靠一件T恤還魂，年入10億美金.md)
+- [別再把紅牛當飲料公司！它如何靠「玩命運動」，一年賣出140億罐？](./別再把紅牛當飲料公司！它如何靠「玩命運動」，一年賣出140億罐？.md)
+- [一家馬桶公司，為什麼成了AI命脈？TOTO埋了50年的暗棋](./一家馬桶公司，為什麼成了AI命脈？TOTO埋了50年的暗棋.md)
+- [樂高差點被「創新」害死：最後救它的，竟是一雙舊球鞋！](./樂高差點被「創新」害死：最後救它的，竟是一雙舊球鞋！.md)
+- [錯過NVIDIA了？Anthropic可能是下一個改變你財富命運的AI巨頭](./錯過NVIDIA了？Anthropic可能是下一個改變你財富命運的AI巨頭.md)
+- [長榮帝國締造者張榮發：算準了世界，為何算錯了自己的人生？](./長榮帝國締造者張榮發：算準了世界，為何算錯了自己的人生？.md)
+- [不准離婚、不准婚外情：李錦記靠一部狠到離譜的家法，打破「富不過三代」！](./不准離婚、不准婚外情：李錦記靠一部狠到離譜的家法，打破「富不過三代」！.md)
+- [誠品自食其果？養肥黃金地段18年，反被房東掃地出門....](./誠品自食其果？養肥黃金地段18年，反被房東掃地出門.....md)
+- [Shein帝国：廉价时尚背后的惊人代价｜许仰天｜婚纱网店](./Shein帝国：廉价时尚背后的惊人代价｜许仰天｜婚纱网店.md)
 - [【2026年最新版】タイ入国前に必ず見て！入国前・入国審査・入国後の注意事項まとめ](./【2026年最新版】タイ入国前に必ず見て！入国前・入国審査・入国後の注意事項まとめ.md)
 - [比西藏、新疆、蒙古近 【韓國為啥不是中國的？】文化最像 卻沒被併吞？](./比西藏、新疆、蒙古近_【韓國為啥不是中國的？】文化最像_卻沒被併吞？.md)
 - [泰國為什麼掉隊了？越南、大馬、印尼都在搶產業，曼谷還能翻身嗎？](./泰國為什麼掉隊了？越南、大馬、印尼都在搶產業，曼谷還能翻身嗎？.md)