v1

env/.env

@@ -0,0 +1 @@
+VITE_ENV = "DEV"

env/.env.prod

@@ -0,0 +1 @@
+VITE_ENV = "PROD"

env/.env.uni

@@ -0,0 +1 @@
+VITE_ENV = "UNI"

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --host",
-    "build": "vite build",
+    "build": "vite build --mode prod",
+    "build-uni-app": "vite build --mode uni",
     "report": "vite build",
     "preview": "vite preview"
   },

src/assets/img/icon/danmu-close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711682843861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24065" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M300.896 470.46399969v37.76000062h73.44c0 68.60800031 3.648 116.16-0.83200031 139.296-5.376 23.136-31.872 35.904-72.60799969 38.304-11.64799969 0-23.29600031-0.79999969-35.83999969-1.60000031l-12.92800031-48.096c11.616 1.21600031 29.92000031 4.09600031 41.34400031 4.09600031 9.696 0 19.64800031-0.89599969 22.78399969-13.66400062 3.13600031-12.79999969 4.48000031-22.656 4.48000031-64.92799969H240.00000031v-138.36799969h80.70399938v-50.52800062H240.00000031v-50.23999969h134.33599969v147.96799969H300.896z m107.04-110.81599969h55.968a302.23999969 302.23999969 0 0 0-33.6-49.44l47.35999969-18.17599969c12.576 15.936 25.92 36.54400031 35.328 54.87999938l-29.31199969 12.73600031h47.136c12.54400031-20.32000031 20.28799969-48.51199969 30.144-71.64799969l59.20000031 22.20799969c-8.95999969 19.13599969-22.39999969 34.30399969-33.56800031 49.44l69.408 0.73600031v177.91999969l-95.04 0.89599969v24.384h95.04v51.29600062h-95.04V704h-64.896v-89.11999969h-96.12799969v-51.29600062h96.12799969v-26.04799969h-88.128V359.67999969z m192.12799969 136.63999969v-28.92799969h-40.19199938v28.92799969h40.19199938z m-103.74399938 0v-28.92799969h-40.96000031v28.92799969h40.96000031z m-40.96000031-63.23199938h40.96000031v-29.02400062h-40.96000031v29.02400062z m104.51200031-29.02400062v29.02400062h40.19199938v-29.02400062h-40.19199938z" p-id="24066" fill="#ffffff"></path><path d="M752 864.00000031a144 144 0 1 0 0-288 144 144 0 0 0 0 288z m0 63.99999938a208.00000031 208.00000031 0 1 1 0-415.99999969 208.00000031 208.00000031 0 0 1 0 415.99999969z" p-id="24067" fill="#ffffff"></path><path d="M662.36799969 849.728a31.99999969 31.99999969 0 1 1-44.736-45.76000031l224.00000062-218.88a31.99999969 31.99999969 0 0 1 44.736 45.792l-224.00000062 218.84800031z" p-id="24068" fill="#ffffff"></path><path d="M408.00000031 783.99999969a40.00000031 40.00000031 0 0 1 0 80.00000062h-240A103.99999969 103.99999969 0 0 1 63.99999969 759.99999969V231.99999969A103.99999969 103.99999969 0 0 1 168.00000031 128h559.99999969A103.99999969 103.99999969 0 0 1 831.99999969 231.99999969v176.00000062a40.00000031 40.00000031 0 0 1-79.99999969 0v-176.00000062a24 24 0 0 0-24-24H168.00000031a24 24 0 0 0-24 24v528c0 13.248 10.752 24 24 24h240z" p-id="24069" fill="#ffffff"></path></svg>

src/assets/img/icon/danmu-open.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711682834916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1641" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M408.00000031 783.99999969a40.00000031 40.00000031 0 0 1 0 80.00000062h-240A103.99999969 103.99999969 0 0 1 63.99999969 759.99999969V231.99999969A103.99999969 103.99999969 0 0 1 168.00000031 128h559.99999969A103.99999969 103.99999969 0 0 1 831.99999969 231.99999969v176.00000062a40.00000031 40.00000031 0 0 1-79.99999969 0v-176.00000062a24 24 0 0 0-24-24H168.00000031a24 24 0 0 0-24 24v528c0 13.248 10.752 24 24 24h240z" p-id="1642" fill="#ffffff"></path><path d="M300.896 470.46399969v37.76000062h73.44c0 68.60800031 3.648 116.16-0.83200031 139.296-5.376 23.136-31.872 35.904-72.60799969 38.304-11.64799969 0-23.29600031-0.79999969-35.83999969-1.60000031l-12.92800031-48.096c11.616 1.21600031 29.92000031 4.09600031 41.34400031 4.09600031 9.696 0 19.64800031-0.89599969 22.78399969-13.66400062 3.13600031-12.79999969 4.48000031-22.656 4.48000031-64.92799969H240.00000031v-138.36799969h80.70399938v-50.52800062H240.00000031v-50.23999969h134.33599969v147.96799969H300.896z m107.04-110.81599969h55.968a302.23999969 302.23999969 0 0 0-33.6-49.44l47.35999969-18.17599969c12.576 15.936 25.92 36.54400031 35.328 54.87999938l-29.31199969 12.73600031h47.136c12.54400031-20.32000031 20.28799969-48.51199969 30.144-71.64799969l59.20000031 22.20799969c-8.95999969 19.13599969-22.39999969 34.30399969-33.56800031 49.44l69.408 0.73600031v177.91999969l-95.04 0.89599969v24.384h95.04v51.29600062h-95.04V704h-64.896v-89.11999969h-96.12799969v-51.29600062h96.12799969v-26.04799969h-88.128V359.67999969z m192.12799969 136.63999969v-28.92799969h-40.19199938v28.92799969h40.19199938z m-103.74399938 0v-28.92799969h-40.96000031v28.92799969h40.96000031z m-40.96000031-63.23199938h40.96000031v-29.02400062h-40.96000031v29.02400062z m104.51200031-29.02400062v29.02400062h40.19199938v-29.02400062h-40.19199938z" p-id="1643" fill="#ffffff"></path><path d="M752 864.00000031a144 144 0 1 0 0-288 144 144 0 0 0 0 288z m0 63.99999938a208.00000031 208.00000031 0 1 1 0-415.99999969 208.00000031 208.00000031 0 0 1 0 415.99999969z" p-id="1644" fill="#ffffff"></path><path d="M809.95200031 658.36800031a31.99999969 31.99999969 0 0 1 43.26399938 47.16799969l-118.656 108.79999969-71.93599969-77.11999969a31.99999969 31.99999969 0 1 1 46.81600031-43.64800031l28.63999969 30.72 71.87200031-65.91999938z" p-id="1645" fill="#ffffff"></path></svg>

src/assets/img/icon/rotate.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711682919593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31958" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M153.589901 460.837028h409.573071a153.589901 153.589901 0 0 1 153.589901 153.589901v255.98317a153.589901 153.589901 0 0 1-153.589901 153.589901H153.589901a153.589901 153.589901 0 0 1-153.589901-153.589901V614.426929a153.589901 153.589901 0 0 1 153.589901-153.589901z m0 76.794951a76.794951 76.794951 0 0 0-76.79495 76.79495v255.98317a76.794951 76.794951 0 0 0 76.79495 76.79495h409.573071a76.794951 76.794951 0 0 0 76.794951-76.79495V614.426929a76.794951 76.794951 0 0 0-76.794951-76.79495H153.589901zM437.398441 128.929251c343.938986 13.336723 542.684319 228.157799 586.278252 596.312792a38.295082 38.295082 0 0 1-33.636188 42.493206 38.371877 38.371877 0 0 1-42.646796-33.508196C908.484267 405.467868 742.223199 219.035326 439.036733 205.59621l61.691944 61.640747a38.397475 38.397475 0 0 1-54.319628 54.319629l-120.184098-120.184098A38.218287 38.218287 0 0 1 307.179803 167.352325c-0.255983-10.136933 3.506969-20.350662 11.263259-28.081354l127.991585-127.965986a38.397475 38.397475 0 0 1 54.268432 54.319628l-63.304638 63.304638z" fill="#ffffff" p-id="31959"></path></svg>

src/config/index.js

@@ -3,9 +3,12 @@ export default {
   imgPath: '/imgs/',
   filePreview: 'http://192.168.0.103/static/uploads/',
 }
+const BASE_URL_MAP = {
+  DEV: '',
+  PROD: '',
+  UNI: 'https://dy.ttentau.top'
+}
 
-// export const BASE_URL = 'https://dy.ttentau.top'
-export const BASE_URL = ''
-// export const BASE_URL = 'https://gitee.com/zyronon/douyin/raw/master/public'
+export const BASE_URL = BASE_URL_MAP[import.meta.env.VITE_ENV]
 export const IMG_URL = BASE_URL + '/images/'
 export const FILE_URL = BASE_URL + '/data/'

src/pages/home/slide/LongVideo.vue

@@ -1,10 +1,11 @@
 <script setup>
 
-import {reactive, watch} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
 import {recommendedVideo} from "@/api/videos";
 import {useBaseStore} from "@/store/pinia";
 import ScrollList from "@/components/ScrollList.vue";
+import {useNav} from "@/utils/hooks/useNav";
 
 const baseStore = useBaseStore()
 
@@ -18,18 +19,66 @@ const p = {
   }
 }
 
+const playingEl = ref()
 const state = reactive({
-  show:false
+  show: false,
+  muted: true,
+  danmu: false
 })
 
 watch(() => props.active, n => {
-  if (n && !state.show) {
-    state.show = true
+  if (n) {
+    if (state.show) {
+      let el = playingEl.value
+      if (el) {
+        el.parentNode.parentNode.classList.remove('pause')
+        el.play()
+      }
+    } else {
+      state.show = true
+    }
+  } else {
+    let el = playingEl.value
+    if (el) {
+      el.parentNode.parentNode.classList.add('pause')
+      el.pause()
+    }
   }
 }, {immediate: true})
 
-</script>
+const obList = []
 
+const vIsCanPlay = {
+  mounted(el, binding, vnode, prevVnode) {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        let videoEls = document.querySelectorAll('.long-video video')
+        videoEls.forEach((item) => {
+          item.pause()
+          if (item.parentNode?.parentNode) {
+            item.parentNode.parentNode.classList.add('pause')
+          }
+        })
+        el.parentNode.parentNode.classList.remove('pause')
+        el.play()
+        playingEl.value = el
+      } else {
+        el.parentNode.parentNode.classList.add('pause')
+        el.pause()
+      }
+    }, {threshold: .5});
+    observer.observe(el)
+    obList.push(observer)
+  },
+  unmounted(el, binding, vnode, prevVnode) {
+    obList.map(v => {
+      v.disconnect()
+    })
+  }
+}
+
+const nav = useNav()
+</script>
 
 <template>
   <div class="long-video">
@@ -38,20 +87,50 @@ watch(() => props.active, n => {
                 :api="recommendedVideo"
     >
       <template v-slot="{list}">
-        <div class="page">
+        <div class="list">
           <div class="item"
+               @click="nav( '/video-detail',{},{list, index:i})"
                :class="[
-             i % 5 === 0 && 'big',
-              i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
-              i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
+             i % 9 === 0 && 'big',
+              i % 9 === 0 ? '' : (i % 2 === 1 && 'l'),
+              i % 9 === 0 ? '' : (i % 2 === 0 && 'r'),
          ]"
+
                v-for="(item,i) in list">
-            <video
-                controls
-                :poster="_checkImgUrl(item.video.cover.url_list[0])"
-                :src="item.video.play_addr.url_list[0]"
-            ></video>
-            <img v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
+            <div class="video-wrapper" v-if="i % 9 === 0">
+              <video
+                  muted
+                  preload
+                  loop
+                  x5-video-player-type="h5-page"
+                  :x5-video-player-fullscreen='false'
+                  :webkit-playsinline="true"
+                  :x5-playsinline="true"
+                  :playsinline="true"
+                  :fullscreen="false"
+                  v-is-can-play
+                  :poster="_checkImgUrl(item.video.cover.url_list[0])"
+                  :src="item.video.play_addr.url_list[0]"
+              ></video>
+              <div class="options">
+                <div class="left">
+                </div>
+                <div class="right">
+                  <div class="option" @click.stop="state.danmu = !state.danmu">
+                    <img v-if="state.danmu" src="@/assets/img/icon/danmu-open.svg"/>
+                    <img v-else src="@/assets/img/icon/danmu-close.svg"/>
+                  </div>
+                  <div class="option" @click.stop="state.muted = !state.muted">
+                    <Icon v-if="state.muted" icon="charm:sound-mute"/>
+                    <Icon v-else icon="akar-icons:sound-on"/>
+                  </div>
+                  <div class="option">
+                    <img src="@/assets/img/icon/rotate.svg"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <img v-else v-lazy="_checkImgUrl(item.video.cover.url_list[0])" alt="" class="poster">
             <div class="duration">{{ _duration(item.duration / 1000) }}</div>
             <div class="title">
               {{ item.desc }}
@@ -74,7 +153,6 @@ watch(() => props.active, n => {
 </template>
 
 <style scoped lang="less">
-
 .long-video {
   font-size: 14rem;
   color: white;
@@ -86,7 +164,7 @@ watch(() => props.active, n => {
   }
 }
 
-.page {
+.list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 15rem;
@@ -106,10 +184,41 @@ watch(() => props.active, n => {
       object-fit: cover;
     }
 
-    video {
-      display: none;
+    .video-wrapper {
       height: 220rem;
-      object-fit: cover;
+      position: relative;
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .options {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 12rem;
+        display: flex;
+        position: absolute;
+        bottom: 8rem;
+        justify-content: space-between;
+        align-items: center;
+        color: white;
+
+        .right {
+          display: flex;
+          align-items: center;
+          gap: 10rem;
+        }
+
+        img {
+          width: 20rem;
+        }
+
+        svg {
+          font-size: 20rem;
+        }
+      }
     }
 
     .title {
@@ -180,16 +289,19 @@ watch(() => props.active, n => {
       grid-column-end: 3;
       margin: 0;
 
+      &.pause {
+        .duration {
+          display: block;
+        }
+
+        .options {
+          display: none;
+        }
+      }
+
       .duration {
         display: none;
-      }
-
-      .poster {
-        display: none;
-      }
-
-      video {
-        display: block;
+        bottom: 67rem;
       }
 
       .title {

src/utils/index.jsx

@@ -9,9 +9,6 @@ import dayjs from 'dayjs'
 import bus, {EVENT_KEY} from "./bus";
 
 const Utils = {
-  require2(url) {
-    return new URL(url, import.meta.url).href
-  },
   $showLoading() {
     const app = Vue.createApp({
       render() {
@@ -218,9 +215,6 @@ const Utils = {
   $clone(v) {
     return JSON.parse(JSON.stringify(v))
   },
-  $console(v) {
-    return console.log(JSON.stringify(v, null, 4))
-  },
   $sleep(duration) {
     return new Promise((resolve, reject) => {
       setTimeout(resolve, duration)
@@ -266,16 +260,6 @@ const Utils = {
     }
     return Config.filePreview + url
   },
-  $getTransform(el) {
-    let transform = el.style.transform
-    if (!transform) return 0
-    // console.log('transform',transform)
-    let transformY = transform.substring(transform.indexOf('0px') + 5, transform.lastIndexOf('0px') - 4)
-    // console.log('transformY',transformY)
-    //当前的transformY
-    transformY = parseInt(transformY)
-    return transformY
-  },
   $storageSet(key, value) {
     localStorage.setItem(key, JSON.stringify(value))
   },
@@ -293,7 +277,6 @@ const Utils = {
       localStorage.removeItem(key)
     }
   },
-
   $dateFormat(val, type) {
     if (!val) return
     if (typeof val === 'number') {
@@ -383,21 +366,6 @@ const Utils = {
       return num
     }
   },
-  filterAge(age) {
-    if (!age) return
-    let date = new Date(age)
-    return new Date().getFullYear() - date.getFullYear()
-  },
-  randomNum(minNum, maxNum) {
-    switch (arguments.length) {
-      case 1:
-        return parseInt(Math.random() * minNum + 1, 10);
-      case 2:
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-      default:
-        return 0;
-    }
-  },
   getCenter(a, b) {
     const x = (a.x + b.x) / 2;
     const y = (a.y + b.y) / 2;
@@ -501,3 +469,5 @@ export function sampleSize(arr, num) {
   }
   return list
 }
+
+

vite.config.js

@@ -17,6 +17,7 @@ const lifecycle = process.env.npm_lifecycle_event;
 // https://vitejs.dev/config/
 export default defineConfig({
   base: './',
+  envDir: "env",
   plugins: [
     // VueMacros({
     //   plugins: {