https://yuvilab.ai/assets/LiveViewerView-DN8NTIMe.js

1import{a as se,u as ne,o as ae,b as oe,g as o,c as l,i,t as n,l as v,n as C,j as g,F as w,p as $,H as L,I as q,J as R,L as K,m as Y,e as le,f as re,s as ce,q as de,r as p,x as ve,y as P}from"./vue-core-BPypFI0K.js";import{u as ue}from"./live-DurdQDCv.js";import{e as U,f as pe}from"./index-DmugUT3a.js";import{L as me}from"./liveVoiceService-TZYOkmQV.js";import"./telemetry-B5FCd5NL.js";import"./azure-calls-sNbhmKsf.js";const he={class:"live-viewer-screen"},_e={class:"live-viewer-header"},fe={class:"live-header-info"},ge={class:"live-avatar"},we={class:"live-broadcaster-name"},ye={class:"live-project-name"},be={class:"live-viewer-count"},ke=["title"],Ve={class:"material-icons-round",style:{"font-size":"18px"}},Ce={key:0},$e={key:1},Se={class:"live-viewer-body"},Ie={class:"live-ai-chat-panel"},je={class:"live-panel-header"},xe={class:"live-panel-badge"},Me={class:"live-ai-bubble"},Te={class:"live-ai-role-icon"},Ee={key:0,class:"live-thinking"},Ne={key:1,class:"live-hitl"},ze={class:"live-hitl-choices"},Ae={key:2,class:"live-hitl-answer"},Oe=["innerHTML"],De={key:0,class:"live-typing-indicator"},He={class:"live-typing-avatar"},Fe={class:"live-typing-text"},Le={key:1,class:"live-ai-empty"},qe={class:"live-preview-panel"},Re={class:"live-panel-header"},Ke={class:"live-preview-wrap"},Ye=["srcdoc"],Pe={style:{display:"flex","align-items":"center",gap:"8px"}},Ue={class:"live-viewer-count-badge"},Je={class:"material-icons-round",style:{"font-size":"16px",color:"rgba(255,255,255,0.4)"}},We={class:"reaction-avatar"},Be={class:"reaction-body"},Ge={class:"reaction-username"},Qe={class:"reaction-content"},Xe={key:0,class:"live-reactions-empty"},Ze={class:"live-quick-emojis"},et=["onClick"],tt={class:"live-reaction-input-wrap"},it=["placeholder","onKeydown"],st=["disabled"],nt={key:1,class:"live-reactions-collapsed-bar"},at=["placeholder","onKeydown"],ot=["disabled"],pt=se({__name:"LiveViewerView",props:{streamId:{}},emits:["back"],setup(J,{emit:W}){const y=J,O=W,{t:S}=ne(),a=ue(),r=p("off"),m=p(!1),b=new me,I=p(),j=p(),h=p(""),x=p(0),M=p(""),f=p(!1),T=p([]);let B=0;const k=p(!1);let V=null;const G=["❤️","🔥","😍","👏","🌟","😂","🎉","💡"];let d=null,z=null,E=!0;const Q=ve(()=>{const e=document.documentElement.dir||"rtl",s=document.documentElement.lang||"he",t=S("liveViewer.waiting_preview"),c=S("liveViewer.waiting_preview_subtitle");return`<!DOCTYPE html><html dir="${e}" lang="${s}"><head><style>
2*{margin:0;padding:0;box-sizing:border-box}
3body{background:#0f1020;display:flex;align-items:center;justify-content:center;height:100vh;font-family:Rubik,Heebo,sans-serif;overflow:hidden}
4.wrap{text-align:center;animation:fadeUp .6s ease-out}
5.icon{font-size:64px;margin-bottom:16px;animation:bounce 2s ease-in-out infinite}
6.title{font-size:1.1rem;color:rgba(255,255,255,.55);margin-bottom:8px}
7.sub{font-size:.85rem;color:rgba(255,255,255,.3)}
8.dots{display:flex;gap:6px;justify-content:center;margin-top:20px}
9.dot{width:8px;height:8px;border-radius:50%;background:rgba(102,126,234,.4);animation:pulse 1.4s ease-in-out infinite}
10.dot:nth-child(2){animation-delay:.2s}
11.dot:nth-child(3){animation-delay:.4s}
12@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
13@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
14@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
15</style></head><body>
16<div class="wrap">
17<div class="icon">🎨</div>
18<div class="title">${t}</div>
19<div class="sub">${c}</div>
20<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
21</div></body></html>`});function X(e){return e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\*\*(.*?)\*\*/g,"<strong>$1</strong>").replace(/\*(.*?)\*/g,"<em>$1</em>").replace(/`(.*?)`/g,"<code>$1</code>").replace(/\n/g,"<br>"):""}function D(){if(!E)return;const e=window.location.protocol==="https:"?"wss:":"ws:";d=new WebSocket(`${e}//${window.location.host}/ws/live/${y.streamId}`),d.onmessage=t=>{try{const c=JSON.parse(t.data);Z(c)}catch{}}

21,d.onclose=()=>{E&&(z=setTimeout(()=>D(),3e3))},d.onerror=()=>{};const s=setInterval(()=>{d?.readyState===WebSocket.OPEN?d.send(JSON.stringify({type:"ping"})):clearInterval(s)},25e3)}function Z(e){const s=e.type;if(s==="stream_snapshot"){const t=e.preview_html||"";t&&(M.value=t,x.value++);const c=e.chat_snapshot||[];a.setChatSnapshot(c.map(u=>({role:u.role,content:u.content,timestamp:u.timestamp||""}))),a.setViewerCount(e.viewer_count||0),_()}else if(s==="preview_update")M.value=e.html||"",x.value++;else if(s==="chat_update"){const t={role:e.role,content:e.content||"",streaming:!1,timestamp:new Date().toISOString()};a.addChatMessage(t),_()}else if(s==="chat_thinking")a.addChatMessage({role:"assistant",content:e.content||S("liveViewer.Yovi_thinking"),type:"thinking",timestamp:new Date().toISOString()}),_();else if(s==="chat_delta"){const t=a.chatMessages[a.chatMessages.length-1];t&&t.streaming&&t.role==="assistant"?(t.content=e.content||"",t.streaming=e.streaming):a.addChatMessage({role:"assistant",content:e.content||"",streaming:e.streaming!==!1,timestamp:new Date().toISOString()}),_()}else if(s==="chat_hitl")a.addChatMessage({role:"assistant",content:e.content||"",type:"hitl_question",choices:e.choices||[],timestamp:new Date().toISOString()}),_();else if(s==="chat_hitl_answer"){const t=e.content||"",c=[...a.chatMessages].reverse().find(u=>u.type==="hitl_question");c&&(c.selectedChoice=t),a.addChatMessage({role:"user",content:t,type:"hitl_answer",timestamp:new Date().toISOString()}),_()}else if(s==="reaction"){const t=e.reaction;t&&(a.addReaction({id:t.id,userId:t.user_id,userName:t.user_name,userAvatar:t.user_avatar,type:t.type,content:t.content,timestamp:t.created_at}),te(),t.type==="emoji"&&ie(t.content))}else s==="viewer_count"?a.setViewerCount(e.count||0):s==="voice_started"?e.group_id&&H():s==="voice_stopped"?A():s==="stream_end"?(A(),a.stopViewing(),O("back")):s==="typing_indicator"&&(k.value=e.is_typing??!1,V&&clearTimeout(V),k.value&&(V=setTimeout(()=>{k.value=!1},4e3),_()))}async function H(e){if(!(r.value==="on"||r.value==="connecting")){r.value="connecting";try{const s=await pe(`/api/live/${y.streamId}/voice/token`);await b.initialize(s.token,S("liveViewer.viewer_label")),b.onDisconnected=()=>{r.value="off",m.value=!1},await b.joinGroup(s.group_id,!1),r.value="on",m.value=!1}catch(s){console.error("Failed to join voice channel",s),r.value="off"}}}function A(){if(r.value!=="off"){try{b.dispose()}catch{}r.value="off",m.value=!1}}async function ee(){if(r.value==="on")try{m.value=await b.toggleIncomingAudio()}catch(e){console.error("Failed to toggle audio",e)}}function _(){P(()=>{I.value&&(I.value.scrollTop=I.value.scrollHeight)})}function te(){P(()=>{j.value&&(j.value.scrollTop=j.value.scrollHeight)})}function ie(e){const s=++B,t=Math.random()*80+10;T.value.push({id:s,emoji:e,x:t}),setTimeout(()=>{T.value=T.value.filter(c=>c.id!==s)},2500)}async function F(e,s){!d||d.readyState!==WebSocket.OPEN||d.send(JSON.stringify({type:"reaction",content:e,reaction_type:s}))}async function N(){const e=h.value.trim();e&&(h.value="",await F(e,"comment"))}return ae(async()=>{E=!0;try{const e=await U(`/api/live/${y.streamId}/join`,{});a.startViewing({id:y.streamId,broadcasterId:"",broadcasterName:e.broadcaster_name,broadcasterAvatar:e.broadcaster_avatar,projectId:"",projectName:e.project_name,viewerCount:e.viewer_count,startedAt:"",previewHtml:e.current_preview_html}),e.current_preview_html&&(M.value=e.current_preview_html,x.value++),e.chat_snapshot?.length&&a.setChatSnapshot(e.chat_snapshot.map(s=>({role:s.role,content:s.content,timestamp:s.timestamp}))),e.voice_group_id&&H(e.voice_group_id)}catch(e){console.error("Failed to join stream",e),O("back");return}D()}),oe(()=>{if(E=!1,A(),z&&clearTimeout(z),V&&clearTimeout(V),d)try{d.close()}catch{}a.stopViewing(),U(`/api/live/${y.streamId}/leave`,{}).catch(()=>{})}),(e,s)=>(o(),l("div",he,[i("div",_e,[i("button",{class:"live-back-btn",onClick:s[0]||(s[0]=t=>e.$emit("back"))},[s[4]||(s[4]=i("span",{class:"material-icons-round"},"arrow_back",-1)),i("span",null,n(e.$t("liveViewer.back_btn")),1)]),i("div",fe,[s[5]||(s[5]=i("span",{class:"live-badge"},"🔴 LIVE",-1)),i("span",ge,n(v(a).currentStream?.broadcasterAvatar),1),i("span",we,n(v(a).currentStream?.broadcasterName),1),i("span",ye,"- "+n(v(a).currentStream?.projectName),1)]),i("div",be,[s[6]||(s[6]=i("span",{class:"material-icons-round",style:{"font-size":"18px",color:"#f87171"}},"people",-1)),i("span",null,n(e.$t("liveViewer.viewers_count",{count:v(a).viewerCount})),1)]),r.value!=="off"?(o(),l("button",{key:0,class:C(["live-viewer-voice-btn",{"voice-muted":m.value,"voice-connecting":r.value==="connecting"}]),onClick:ee,title:m.value?e.$t("liveViewer.unmute_audio"):e.$t("liveViewer.mute_audio")},[i("span",Ve,n(r.value==="connecting"?"hearing_disabled":m.value?"volume_off":"volume_up"),1),r.value==="connecting"?(o(),l("span",Ce,n(e.$t("liveViewer.connecting_audio")),1)):(o(),l("span",$e,n(m.value?e.$t("liveViewer.audio_muted_label"):e.$t("liveViewer.audio_on_label")),1))],10,ke)):g("",!0)]),i("div",Se,[i("div",Ie,[i("div",je,[i("span",null,n(e.$t("liveViewer.ai_chat_title",{name:v(a).currentStream?.broadcasterName})),1),i("span",xe,n(e.$t("liveViewer.read_only_badge")),1)]),i("div",{class:"live-ai-messages",ref_key:"aiMessagesEl",ref:I},[(o(!0),l(w,null,$(v(a).chatMessages,(t,c)=>(o(),l("div",{key:c,class:C(["live-ai-msg",t.role])},[i("div",Me,[i("span",Te,n(t.role==="user"?"👦":"🤖"),1),t.type==="thinking"?(o(),l("span",Ee,[L(n(t.content)+" ",1),s[7]||(s[7]=i("span",{class:"typing-dots"},[i("span"),i("span"),i("span")],-1))])):t.type==="hitl_question"?(o(),l("span",Ne,[L(n(t.content)+" ",1),i("div",ze,[(o(!0),l(w,null,$(t.choices,u=>(o(),l("span",{key:u,class:C(["live-hitl-chip",{"hitl-chip-selected":t.selectedChoice===u,"hitl-chip-dimmed":t.selectedChoice&&t.selectedChoice!==u}])},n(u),3))),128))])])):t.type==="hitl_answer"?(o(),l("span",Ae," ✅ "+n(t.content),1)):(o(),l("span",{key:3,innerHTML:X(t.content)},null,8,Oe))])],2))),128)),k.value?(o(),l("div",De,[i("span",He,n(v(a).currentStream?.broadcasterAvatar),1),i("span",Fe,n(e.$t("liveViewer.broadcaster_typing")),1),s[8]||(s[8]=i("span",{class:"typing-dots"},[i("span"),i("span"),i("span")],-1))])):g("",!0),v(a).chatMessages.length===0&&!k.value?(o(),l("div",Le,n(e.$t("liveViewer.waiting_chat")),1)):g("",!0)],512)]),i("div",qe,[i("div",Re,[i("span",null,n(e.$t("liveViewer.live_preview_title")),1)]),i("div",Ke,[(o(),l("iframe",{key:x.value,class:"live-preview-frame",sandbox:"allow-scripts allow-pointer-lock",srcdoc:M.value||Q.value,referrerpolicy:"no-referrer"},null,8,Ye))])]),i("div",{class:C(["live-reactions-panel",{"live-reactions-collapsed":f.value}])},[i("div",{class:"live-panel-header",style:{cursor:"pointer"},onClick:s[1]||(s[1]=t=>f.value=!f.value)},[i("span",null,n(e.$t("liveViewer.broadcast_chat_title")),1),i("div",Pe,[i("span",Ue,"👥 "+n(v(a).viewerCount),1),i("span",Je,n(f.value?"chevron_right":"chevron_left"),1)])]),f.value?g("",!0):(o(),l(w,{key:0},[i("div",{class:"live-reactions-feed",ref_key:"reactionsFeedEl",ref:j},[(o(!0),l(w,null,$(v(a).reactions,t=>(o(),l("div",{key:t.id,class:C(["live-reaction-item",t.type])},[i("span",We,n(t.userAvatar),1),i("div",Be,[i("span",Ge,n(t.userName),1),i("span",Qe,n(t.content),1)])],2))),128)),v(a).reactions.length===0?(o(),l("div",Xe,n(e.$t("liveViewer.be_first_to_react")),1)):g("",!0)],512),i("div",Ze,[(o(),l(w,null,$(G,t=>i("button",{key:t,class:"quick-emoji-btn",onClick:c=>F(t,"emoji")},n(t),9,et)),64))]),i("div",tt,[q(i("input",{"onUpdate:modelValue":s[2]||(s[2]=t=>h.value=t),type:"text",class:"live-reaction-input",placeholder:e.$t("liveViewer.write_reaction_placeholder"),maxlength:"200",onKeydown:K(Y(N,["prevent"]),["enter"])},null,40,it),[[R,h.value]]),i("button",{class:"live-reaction-send-btn",onClick:N,disabled:!h.value.trim()},[...s[9]||(s[9]=[i("span",{class:"material-icons-round",style:{"font-size":"18px"}},"send",-1)])],8,st)])],64)),f.value?(o(),l("div",nt,[q(i("input",{"onUpdate:modelValue":s[3]||(s[3]=t=>h.value=t),type:"text",class:"live-reaction-input",placeholder:e.$t("liveViewer.reaction_placeholder_collapsed"),maxlength:"200",onKeydown:K(Y(N,["prevent"]),["enter"])},null,40,at),[[R,h.value]]),i("button",{class:"live-reaction-send-btn",onClick:N,disabled:!h.value.trim()},[...s[10]||(s[10]=[i("span",{class:"material-icons-round",style:{"font-size":"18px"}},"send",-1)])],8,ot)])):g("",!0)],2)]),le(de,{name:"float-emoji",tag:"div",class:"floating-emojis-container"},{default:re(()=>[(o(!0),l(w,null,$(T.value,t=>(o(),l("div",{key:t.id,class:"floating-emoji",style:ce({left:t.x+"%"})},n(t.emoji),5))),128))]),_:1})]))}});

21export{pt as default};