2 lines
7.0 KiB
JavaScript
2 lines
7.0 KiB
JavaScript
import{aB as X,aA as A,r as u,m as W,U as Z,al as y,z as f,A as B,B as e,R as s,J as l,u as d,P as c,M as $,I as E,E as q}from"./vue-vendor-164775a6.js";import{E as g,a as J,u as r,d as G,j as H}from"./element-plus-4a19e5e8.js";import{_ as K}from"./index-2fb4354b.js";import"./utils-edfcd65b.js";const O={class:"video-detail-page"},Q={class:"sidebar"},ee={class:"nav-menu"},te={class:"nav-item active"},se={class:"main-content"},oe={class:"video-player-section"},ae={class:"video-container"},le=["src","poster"],ne={key:0,class:"video-overlay"},ie={class:"overlay-text"},ce={class:"video-controls"},de={class:"control-left"},re={class:"progress-container"},ue={class:"time-display"},ve={class:"control-right"},_e={class:"video-actions"},pe={class:"detail-sidebar"},me={class:"sidebar-header"},fe={class:"user-info"},ge={class:"avatar"},be={class:"username"},ye={class:"description-section"},he={class:"description-text"},ke={class:"metadata-section"},Te={class:"metadata-item"},xe={class:"value"},Ce={class:"metadata-item"},Be={class:"value"},Ee={class:"metadata-item"},Ve={class:"value"},we={class:"metadata-item"},De={class:"value"},Pe={class:"metadata-item"},Se={class:"value"},Le={class:"metadata-item"},Me={class:"value"},Re={__name:"VideoDetail",setup(Ue){const V=X(),p=A(),a=u(null),v=u(!1),b=u(0),m=u(0),h=u(0),n=u({id:"2995697841305810",username:"mingzi_FBx7foZYDS7inL",title:"What Does it Mean To You",overlayText:"What Does it Mean To You",description:"影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。",createTime:"2025/10/17 13:41",duration:5,resolution:"1080p",category:"文生视频",aspectRatio:"16:9",videoUrl:"/images/backgrounds/welcome.jpg",cover:"/images/backgrounds/welcome.jpg"}),w=i=>{const t={"2995000000001":{category:"参考图",title:"图片作品 #1"},"2995000000002":{category:"参考图",title:"图片作品 #2"},"2995000000003":{category:"文生视频",title:"视频作品 #3"},"2995000000004":{category:"图生视频",title:"视频作品 #4"}},o=t[i]||t["2995000000003"];return{id:i,username:"mingzi_FBx7foZYDS7inL",title:o.title,overlayText:o.title,description:"影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。",createTime:"2025/10/17 13:41",duration:5,resolution:"1080p",category:o.category,aspectRatio:"16:9",videoUrl:"/images/backgrounds/welcome.jpg",cover:"/images/backgrounds/welcome.jpg"}},D=()=>{a.value&&(v.value?a.value.pause():a.value.play())},P=()=>{m.value=a.value.duration},S=()=>{b.value=a.value.currentTime,h.value=b.value/m.value*100},L=()=>{v.value=!1},M=i=>{if(!a.value)return;const t=i.currentTarget.getBoundingClientRect(),_=(i.clientX-t.left)/t.width*m.value;a.value.currentTime=_},k=i=>{const t=Math.floor(i/60),o=Math.floor(i%60);return`${t.toString().padStart(2,"0")}:${o.toString().padStart(2,"0")}`},R=()=>{a.value&&(document.fullscreenElement?document.exitFullscreen():a.value.requestFullscreen())},U=()=>{g.info("分享功能开发中")},j=()=>{g.success("开始下载视频")},F=async()=>{try{await J.confirm("确定删除这个视频吗？","删除确认",{type:"warning",confirmButtonText:"删除",cancelButtonText:"取消"}),g.success("视频已删除"),p.back()}catch{}},z=()=>{g.info("跳转到文生视频创作页面")},I=()=>{p.push("/profile")},Y=()=>{p.push("/subscription")},N=()=>{p.back()},T=()=>{v.value=!0},x=()=>{v.value=!1};return W(()=>{const i=V.params.id;i&&(n.value=w(i)),a.value&&(a.value.addEventListener("play",T),a.value.addEventListener("pause",x))}),Z(()=>{a.value&&(a.value.removeEventListener("play",T),a.value.removeEventListener("pause",x))}),(i,t)=>{const o=y("el-icon"),C=y("Pause"),_=y("el-tooltip");return f(),B("div",O,[e("aside",Q,[t[3]||(t[3]=e("div",{class:"logo"},"logo",-1)),e("nav",ee,[e("div",{class:"nav-item",onClick:I},[s(o,null,{default:l(()=>[s(d(r))]),_:1}),t[0]||(t[0]=e("span",null,"个人主页",-1))]),e("div",{class:"nav-item",onClick:Y},[s(o,null,{default:l(()=>[s(d(r))]),_:1}),t[1]||(t[1]=e("span",null,"会员订阅",-1))]),e("div",te,[s(o,null,{default:l(()=>[s(d(G))]),_:1}),t[2]||(t[2]=e("span",null,"我的作品",-1))])])]),e("main",se,[e("div",oe,[e("div",ae,[e("video",{ref_key:"videoPlayer",ref:a,class:"video-player",src:n.value.videoUrl,poster:n.value.cover,onLoadedmetadata:P,onTimeupdate:S,onEnded:L}," 您的浏览器不支持视频播放 ",40,le),n.value.overlayText?(f(),B("div",ne,[e("div",ie,c(n.value.overlayText),1)])):$("",!0),e("div",ce,[e("div",de,[e("button",{class:"play-btn",onClick:D},[v.value?(f(),E(o,{key:1},{default:l(()=>[s(C)]),_:1})):(f(),E(o,{key:0},{default:l(()=>[s(d(r))]),_:1}))]),e("div",re,[e("div",{class:"progress-bar",onClick:M},[e("div",{class:"progress-fill",style:q({width:h.value+"%"})},null,4)]),e("div",ue,c(k(b.value))+" / "+c(k(m.value)),1)])]),e("div",ve,[e("button",{class:"control-btn",onClick:R},[s(o,null,{default:l(()=>[s(d(r))]),_:1})])])]),e("div",_e,[s(_,{content:"分享",placement:"bottom"},{default:l(()=>[e("button",{class:"action-btn",onClick:U},[s(o,null,{default:l(()=>[s(d(r))]),_:1})])]),_:1}),s(_,{content:"下载",placement:"bottom"},{default:l(()=>[e("button",{class:"action-btn",onClick:j},[s(o,null,{default:l(()=>[s(d(r))]),_:1})])]),_:1}),s(_,{content:"删除",placement:"bottom"},{default:l(()=>[e("button",{class:"action-btn delete-btn",onClick:F},[s(o,null,{default:l(()=>[s(d(r))]),_:1})])]),_:1})])])]),e("div",pe,[e("div",me,[e("div",fe,[e("div",ge,[s(o,null,{default:l(()=>[s(d(r))]),_:1})]),e("div",be,c(n.value.username),1)]),e("button",{class:"close-btn",onClick:N},[s(o,null,{default:l(()=>[s(d(H))]),_:1})])]),t[11]||(t[11]=e("div",{class:"tabs"},[e("div",{class:"tab active"},"视频详情"),e("div",{class:"tab"},"文生视频")],-1)),e("div",ye,[t[4]||(t[4]=e("h3",{class:"section-title"},"描述",-1)),e("p",he,c(n.value.description),1)]),e("div",ke,[e("div",Te,[t[5]||(t[5]=e("span",{class:"label"},"创建时间",-1)),e("span",xe,c(n.value.createTime),1)]),e("div",Ce,[t[6]||(t[6]=e("span",{class:"label"},"视频 ID",-1)),e("span",Be,c(n.value.id),1)]),e("div",Ee,[t[7]||(t[7]=e("span",{class:"label"},"时长",-1)),e("span",Ve,c(n.value.duration)+"s",1)]),e("div",we,[t[8]||(t[8]=e("span",{class:"label"},"清晰度",-1)),e("span",De,c(n.value.resolution),1)]),e("div",Pe,[t[9]||(t[9]=e("span",{class:"label"},"分类",-1)),e("span",Se,c(n.value.category),1)]),e("div",Le,[t[10]||(t[10]=e("span",{class:"label"},"宽高比",-1)),e("span",Me,c(n.value.aspectRatio),1)])]),e("div",{class:"action-section"},[e("button",{class:"create-similar-btn",onClick:z}," 做同款 ")])])])])}}},Ye=K(Re,[["__scopeId","data-v-340da4ae"]]);export{Ye as default};
|