Skip to content

Commit

Permalink
v1
Browse files Browse the repository at this point in the history
  • Loading branch information
zyronon committed Mar 29, 2024
1 parent 7fc72c8 commit 1dedbf1
Show file tree
Hide file tree
Showing 48 changed files with 157 additions and 64 deletions.
1 change: 1 addition & 0 deletions env/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_ENV = "DEV"
1 change: 1 addition & 0 deletions env/.env.prod
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_ENV = "PROD"
1 change: 1 addition & 0 deletions env/.env.uni
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_ENV = "UNI"
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Binary file removed src/assets/img/icon/components/im0.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/im1.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/im2.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/im3.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/img.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imh.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imi.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imj.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imk.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/iml.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imm.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imn.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imo.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imp.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imq.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imr.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/ims.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imt.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imu.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imv.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imw.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imx.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imy.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/imz.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/like-gray-small.png
Binary file not shown.
Binary file removed src/assets/img/icon/components/like-red-small.png
Binary file not shown.
Binary file not shown.
Binary file removed src/assets/img/icon/components/like-white-big.png
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/fgl.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/foo.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/fop.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/fq-.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/fq8.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/ga_.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/gf_.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/hqz.webp
Binary file not shown.
Binary file removed src/assets/img/icon/components/video/i8p.webp
Binary file not shown.
1 change: 1 addition & 0 deletions src/assets/img/icon/danmu-close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/img/icon/danmu-open.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/img/icon/rotate.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions src/config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/'
166 changes: 139 additions & 27 deletions src/pages/home/slide/LongVideo.vue
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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">
Expand All @@ -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 }}
Expand All @@ -74,7 +153,6 @@ watch(() => props.active, n => {
</template>
<style scoped lang="less">
.long-video {
font-size: 14rem;
color: white;
Expand All @@ -86,7 +164,7 @@ watch(() => props.active, n => {
}
}
.page {
.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15rem;
Expand All @@ -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 {
Expand Down Expand Up @@ -180,16 +289,19 @@ watch(() => props.active, n => {
grid-column-end: 3;
margin: 0;
.duration {
display: none;
}
&.pause {
.duration {
display: block;
}
.poster {
display: none;
.options {
display: none;
}
}
video {
display: block;
.duration {
display: none;
bottom: 67rem;
}
.title {
Expand Down
36 changes: 3 additions & 33 deletions src/utils/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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))
},
Expand All @@ -293,7 +277,6 @@ const Utils = {
localStorage.removeItem(key)
}
},

$dateFormat(val, type) {
if (!val) return
if (typeof val === 'number') {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -500,4 +468,6 @@ export function sampleSize(arr, num) {
}
}
return list
}
}


1 change: 1 addition & 0 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const lifecycle = process.env.npm_lifecycle_event;
// https://vitejs.dev/config/
export default defineConfig({
base: './',
envDir: "env",
plugins: [
// VueMacros({
// plugins: {
Expand Down

0 comments on commit 1dedbf1

Please sign in to comment.