@bothub-chat/ui/dist/components/message/video/index.js

Bothub UI Components

import{__awaiter as i}from"tslib";import{jsxs as o,jsx as n}from"react/jsx-runtime";import{useRef as s,useState as e,useCallback as r,useEffect as t}from"react";import{MessageVideoContainer as c,MessageVideoStyled as d,MessageVideoSkeleton as m,MessageVideoControls as p,MessageVideoTimeLine as x,MessageVideoControlsButtons as j,MessageVideoControlsButton as a,MessageVideoTimeText as l,MessageVideoDownload as u}from"./styled.js";import{MaxWindowIcon as g}from"../../../icons/max-window/index.js";import{MinWindowIcon as b}from"../../../icons/min-window/index.js";import{PauseButtonIcon as f}from"../../../icons/pause-button/index.js";import{PlayButtonIcon as h}from"../../../icons/play-button/index.js";import{MessageVideoVolume as w}from"./volume/index.js";import"../../../icons/arrow-down/index.js";import"../../../icons/arrow-narrow-left/index.js";import"../../../icons/arrow-narrow-right/index.js";import"../../../icons/arrow-up/index.js";import"../../../icons/bitcoin/index.js";import"../../../icons/bot-circle/index.js";import"../../../icons/bothub-agg/index.js";import"../../../icons/business-colored/index.js";import"../../../icons/check-circle/index.js";import"../../../icons/close/index.js";import"../../../icons/email-circle/index.js";import"../../../icons/language/index.js";import"../../../icons/lock-circle/index.js";import"../../../icons/menu/index.js";import"../../../icons/medium-circle/index.js";import"../../../icons/tg-circle/index.js";import"../../../icons/tg-colored/index.js";import"../../../icons/youcassa/index.js";import"../../../icons/dashboard/index.js";import"../../../icons/user-profile/index.js";import"../../../icons/logout/index.js";import"../../../icons/habr-2/index.js";import"../../../icons/arrow-2-down/index.js";import"../../../icons/links/index.js";import"../../../icons/free/index.js";import"../../../icons/hotness/index.js";import"../../../icons/checked/index.js";import"../../../icons/ai/index.js";import"../../../icons/bookmarks/index.js";import"../../../icons/bookmarks-big/index.js";import"../../../icons/chat/index.js";import"../../../icons/chats/index.js";import"../../../icons/coder/index.js";import"../../../icons/copy/index.js";import"../../../icons/edit/index.js";import"../../../icons/presets-big/index.js";import"../../../icons/referal/index.js";import"../../../icons/restore/index.js";import"../../../icons/tariff/index.js";import"../../../icons/trash/index.js";import"../../../icons/update/index.js";import"../../../icons/menu-dot/index.js";import"../../../icons/plus-2/index.js";import"../../../icons/plus-1/index.js";import"../../../icons/send/index.js";import"../../../icons/settings/index.js";import"../../../icons/habr/index.js";import"../../../icons/check-small/index.js";import"../../../icons/stop/index.js";import"../../../icons/thumb-up/index.js";import"../../../icons/thumb-down/index.js";import"../../../icons/star/index.js";import"../../../icons/info-big/index.js";import"../../../icons/warning-big/index.js";import"../../../icons/error-big/index.js";import"../../../icons/success-big/index.js";import"../../../icons/mj/index.js";import"../../../icons/card/index.js";import"../../../icons/arrow-narrow-up/index.js";import"../../../icons/arrow-narrow-down/index.js";import"../../../icons/filters/index.js";import"../../../icons/info/index.js";import"../../../icons/search-circle/index.js";import"../../../icons/save/index.js";import"../../../icons/light/index.js";import"../../../icons/dark/index.js";import"../../../icons/email-colored/index.js";import"../../../icons/action-chat/index.js";import"../../../icons/attach/index.js";import"../../../icons/avatar-add/index.js";import"../../../icons/brush/index.js";import"../../../icons/calendar/index.js";import"../../../icons/claude/index.js";import"../../../icons/cookie/index.js";import"../../../icons/dalle/index.js";import{DownloadImgIcon as v}from"../../../icons/download-img/index.js";import"../../../icons/error/index.js";import"../../../icons/expand/index.js";import"../../../icons/eye/index.js";import"../../../icons/face/index.js";import"../../../icons/gear/index.js";import"../../../icons/gear-min/index.js";import"../../../icons/generation/index.js";import"../../../icons/gpt-3_5/index.js";import"../../../icons/gpt-4/index.js";import"../../../icons/imagine/index.js";import"../../../icons/imagine-2/index.js";import"../../../icons/loader/index.js";import"../../../icons/loader-circular/index.js";import"../../../icons/loader-circular-gradient/index.js";import"../../../icons/loader-circular-gradient-2/index.js";import"../../../icons/minus/index.js";import"../../../icons/mj-white/index.js";import"../../../icons/prompt/index.js";import"../../../icons/rabbit/index.js";import"../../../icons/ratio-1x1/index.js";import"../../../icons/ratio-2x3/index.js";import"../../../icons/ratio-3x2/index.js";import"../../../icons/ratio-4x5/index.js";import"../../../icons/ratio-4x7/index.js";import"../../../icons/ratio-5x4/index.js";import"../../../icons/ratio-7x4/index.js";import"../../../icons/ratio-16x9/index.js";import"../../../icons/ratio-9x16/index.js";import"../../../icons/ratio-21x9/index.js";import"../../../icons/ratio-9x21/index.js";import"../../../icons/refferal-min/index.js";import"../../../icons/search-data/index.js";import"../../../icons/square/index.js";import"../../../icons/turtle/index.js";import"../../../icons/upscale/index.js";import"../../../icons/withdraw/index.js";import"../../../icons/search-plus/index.js";import"../../../icons/lightning/index.js";import"../../../icons/blog-circle/index.js";import"../../../icons/stripe/index.js";import"../../../icons/corporate/index.js";import"../../../icons/public/index.js";import"../../../icons/private/index.js";import"../../../icons/mistral/index.js";import"../../../icons/gemini/index.js";import"../../../icons/search-simple/index.js";import"../../../icons/sad-robot/index.js";import"../../../icons/model/index.js";import"../../../icons/phone-colored/index.js";import"../../../icons/questions/index.js";import"../../../icons/pdf-big/index.js";import"../../../icons/xls-big/index.js";import"../../../icons/word-big/index.js";import"../../../icons/txt-big/index.js";import"../../../icons/pdf/index.js";import"../../../icons/xls/index.js";import"../../../icons/word/index.js";import"../../../icons/txt/index.js";import"../../../icons/bothub-logo-gradient/index.js";import"../../../icons/telegram-logo-gradient/index.js";import"../../../icons/decline-circle/index.js";import"../../../icons/simple-gear-bg/index.js";import"../../../icons/advanced-filter/index.js";import"../../../icons/big-corporate/index.js";import"../../../icons/big-mj/index.js";import"../../../icons/big-models/index.js";import"../../../icons/big-stats/index.js";import"../../../icons/big-success/index.js";import"../../../icons/big-users/index.js";import"../../../icons/optional-presets/index.js";import"../../../icons/wallet-withdraw/index.js";import"../../../icons/big-presets/index.js";import"../../../icons/big-favorite/index.js";import"../../../icons/big-referal/index.js";import"../../../icons/attach-file/index.js";import"../../../icons/attach-file-big/index.js";import"../../../icons/voice/index.js";import"../../../icons/text-read/index.js";import"../../../icons/text-hide/index.js";import"../../../icons/best-chat-bots/index.js";import"../../../icons/upload/index.js";import"../../../icons/enter/index.js";import"../../../icons/discord/index.js";import"../../../icons/discord-circle/index.js";import"../../../icons/black-forest-labs/index.js";import"../../../icons/flux/index.js";import"../../../icons/stable-diffusion/index.js";import"../../../icons/stability-ai/index.js";import"../../../icons/article-generator/index.js";import"../../../icons/success/index.js";import"../../../icons/google/index.js";import"../../../icons/yandex/index.js";import"../../../icons/vk/index.js";import"../../../icons/resend/index.js";import"../../../icons/big-article/index.js";import"../../../icons/add-chat/index.js";import"../../../icons/add-group/index.js";import"../../../icons/drag-dot/index.js";import"../../../icons/add-folder/index.js";import"../../../icons/temp-chat/index.js";import"../../../icons/delete-chat/index.js";import"../../../icons/sidebar-chat/index.js";import"../../../icons/organization/index.js";import"../../../icons/simple-gear/index.js";import"../../../icons/text-bold/index.js";import"../../../icons/text-italic/index.js";import"../../../icons/text-underline/index.js";import"../../../icons/text-strikethrough/index.js";import"../../../icons/refresh/index.js";import"../../../icons/copy-variants/index.js";import"../../../icons/sort-ascending/index.js";import"../../../icons/sort-descending/index.js";import"../../../icons/quote/index.js";import"../../../icons/url-circle/index.js";import"../../../icons/show-ui/index.js";import"../../../icons/hide-ui/index.js";import"../../../icons/sort-user/index.js";import"../../../icons/happy-robot/index.js";import"../../../icons/happy-robot-gradient/index.js";import"../../../icons/manage-chat/index.js";import"../../../icons/analyze-urls/index.js";import"../../../icons/web-search/index.js";import"../../../icons/include-context/index.js";import"../../../icons/queue/index.js";import"../../../icons/sort-alphabet-ascending/index.js";import"../../../icons/sort-alphabet-descending/index.js";import"../../../icons/sort-date-ascending/index.js";import"../../../icons/sort-date-descending/index.js";import"../../../icons/cot-r1/index.js";import"../../../icons/news/index.js";import"../../../icons/volume/index.js";import"../../../icons/flag-ru/index.js";import"../../../icons/flag-kz/index.js";import"../../../icons/print/index.js";import"../../../icons/pc-icon-1/index.js";import"../../../icons/pc-icon-2/index.js";import"../../../icons/pc-icon-3/index.js";import"../../../icons/star-unfilled/index.js";import"../../../icons/image-generation/index.js";import"../../../icons/speech-synthesys/index.js";import"../../../icons/transcription/index.js";import"../../../icons/text-rewrite/index.js";import"../../../icons/code-generation/index.js";import"../../../icons/essay-generation/index.js";import"../../../icons/spelling/index.js";import"../../../icons/text-generation/index.js";import"../../../icons/traffic-analisys/index.js";import"../../../icons/fav-profile/index.js";import"../../../icons/exclamation/index.js";import"../../../icons/article/index.js";import"../../../icons/setchel/index.js";import"../../../icons/assembly/index.js";import"../../../icons/data-visualisation/index.js";import"../../../icons/document-analisys/index.js";import"../../../icons/problem-solvment/index.js";import"../../../icons/setting-analisys/index.js";import"../../../icons/translation/index.js";import"../../../icons/stars/index.js";import"../../../icons/academy/index.js";import"../../../icons/articles/index.js";import"../../../icons/blog-post/index.js";import"../../../icons/book/index.js";import"../../../icons/bow-tie/index.js";import"../../../icons/case-study/index.js";import"../../../icons/comments/index.js";import"../../../icons/guide/index.js";import"../../../icons/marketing/index.js";import"../../../icons/post/index.js";import"../../../icons/report/index.js";import"../../../icons/review/index.js";import"../../../icons/scientific-article/index.js";import"../../../icons/selling-text/index.js";import"../../../icons/textbook/index.js";import"../../../icons/wind/index.js";import"../../../icons/grok/index.js";import"../../../icons/deepseek/index.js";import"../../../icons/grid-horizontal/index.js";import"../../../icons/grid-vertical/index.js";import"../../../icons/star-gradient/index.js";import"../../../icons/qwen/index.js";import"../../../icons/sidebar-toggle-left/index.js";import"../../../icons/sidebar-toggle-right/index.js";import"../../../icons/system/index.js";import"../../../icons/selector/index.js";import"../../../icons/video-camera/index.js";import"../../../icons/music-note/index.js";import"../../../icons/add-profile/index.js";import"../../../icons/token-counter/index.js";import"../../../icons/customer-support/index.js";import"../../../icons/sort-alphabet-top-bottom/index.js";import"../../../icons/sort-alphabet-bottom-top/index.js";import"../../../icons/pause/index.js";import"../../../icons/play/index.js";import"../../../icons/restore-2/index.js";import"../../../icons/video-generation/index.js";import"../../../icons/veo-model/index.js";import"../../../icons/runway/index.js";import"../../../icons/queue-select/index.js";import"../../../icons/apple/index.js";import"../../../icons/mail-colored/index.js";import"../../../icons/shield/index.js";import"../../../icons/stars-gradient/index.js";import"../../../icons/fire/index.js";import"../../../icons/brain/index.js";import"../../../icons/mj-purple/index.js";import"../../../icons/claude-black/index.js";import"../../../icons/vk-filled/index.js";import"../../../icons/tg/index.js";import"../../../icons/gift/index.js";import"../../../icons/exchange/index.js";import"../../../icons/time/index.js";import"../../../icons/folder/index.js";import"../../../icons/history/index.js";import"../../../icons/money-plus/index.js";import"../../../icons/money-stack/index.js";import"../../../icons/sort-numeric-bottom/index.js";import"../../../icons/sort-numeric-top/index.js";import"../../../icons/bulb/index.js";import"../../../icons/prompt-queue/index.js";import"../../../icons/image/index.js";import"../../../icons/text/index.js";import"../../../icons/code/index.js";import"../../../icons/blue-grok/index.js";import"../../../icons/double-image/index.js";import"../../../icons/pdf-black/index.js";import"../../../icons/csv/index.js";import"../../../icons/xls-black/index.js";import"../../../icons/word-black/index.js";import"../../../icons/brain-black/index.js";import"../../../icons/txt-black/index.js";import"../../../icons/workspace/index.js";import"../../../icons/chat-doc/index.js";import"../../../icons/money-spend/index.js";import"../../../icons/money-minus/index.js";import"../../../icons/max-logo-gradient/index.js";import"../../../icons/empty-word/index.js";import"../../../icons/music-file/index.js";import"../../../icons/sad-file/index.js";import"../../../icons/happy-file/index.js";import"../../../icons/volume-off/index.js";import"../../../icons/github/index.js";import"../../../icons/erase/index.js";import"../../../icons/arrow-narrow-stars-right/index.js";import"../../../icons/literature-list/index.js";import"../../../icons/bell-dot/index.js";import"../../../icons/bell/index.js";import"../../../icons/kwaivgi/index.js";import"../../../icons/dollar/index.js";const k=i=>{if(!Number.isFinite(i)||i<0)return"00:00";const o=Math.floor(i/60),n=Math.floor(i%60);return`${o.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`},y=()=>{var i,o;const n=document;return null!==(o=null!==(i=n.fullscreenElement)&&void 0!==i?i:n.webkitFullscreenElement)&&void 0!==o?o:null},F=({src:F,isLoading:E=!1,checkAlive:S,refreshSrc:q,downloadVideo:M})=>{const z=s(null),[C,L]=e(!1),[T,$]=e("00:00"),[A,R]=e("00:00"),[N,V]=e(0),[D,H]=e(!1),[P,U]=e(!0),[_,B]=e(!1),I=s(null),W=D?28:24,X=P||E,G=r(i=>{Number.isFinite(i.duration)&&i.duration>0&&R(k(i.duration)),U(!1)},[]),J=r(()=>i(void 0,void 0,void 0,function*(){if(!X){if(S){if(!(yield S()))return void(null==q||q())}if(z.current)try{yield z.current.play()}catch(i){L(!1)}}}),[S,q,X]),K=r(()=>{z.current&&z.current.pause()},[]),O=r(i=>{const{currentTime:o,duration:n}=i.currentTarget;$(k(o)),!Number.isFinite(n)||n<=0?V(0):V(o/n*100)},[]),Q=r(i=>{G(i.currentTarget)},[G]),Y=r(i=>{if(i.preventDefault(),!z.current)return;const{duration:o}=z.current;if(!Number.isFinite(o)||o<=0)return;const{clientX:n}=i,{width:s,left:e}=i.currentTarget.getBoundingClientRect(),r=(n-e)/s*100;V(r),z.current.currentTime=r/100*o},[]),Z=r(()=>{B(!0)},[]),ii=r(i=>{_&&Y(i)},[_,Y]),oi=r(()=>{B(!1)},[]),ni=r(()=>i(void 0,void 0,void 0,function*(){var o;if(I.current)try{y()?yield i(void 0,void 0,void 0,function*(){const i=document;i.exitFullscreen&&i.fullscreenElement?yield i.exitFullscreen():i.webkitExitFullscreen&&i.webkitFullscreenElement&&(yield i.webkitExitFullscreen())}):yield(o=I.current,i(void 0,void 0,void 0,function*(){const i=o;i.requestFullscreen?yield i.requestFullscreen():i.webkitRequestFullscreen?yield i.webkitRequestFullscreen():i.webkitRequestFullScreen&&(yield i.webkitRequestFullScreen())}))}catch(i){}}),[]),si=r(i=>{if(z.current){const o=Math.floor(i)/100;z.current.volume=o,z.current.muted=0===o}},[]);return t(()=>{L(!1),$("00:00"),R("00:00"),V(0),U(!0);const i=z.current;i&&(i.load(),i.readyState>=HTMLMediaElement.HAVE_METADATA&&G(i))},[F,G]),t(()=>{const i=()=>{H(null!==y())};return document.addEventListener("fullscreenchange",i),document.addEventListener("webkitfullscreenchange",i),()=>{document.removeEventListener("fullscreenchange",i),document.removeEventListener("webkitfullscreenchange",i)}},[]),o(c,{ref:I,onMouseLeave:oi,onMouseMove:ii,onMouseUp:oi,children:[n(d,{ref:z,src:F,playsInline:!0,preload:"metadata",onClick:C?K:J,onLoadedMetadata:Q,onCanPlay:Q,onTimeUpdate:O,onPlay:()=>L(!0),onPause:()=>L(!1),onEnded:K,onError:()=>U(!1),$isFullScreen:D,$isLoading:X},F),X&&n(m,{$isFullScreen:D,fullWidth:!0,variant:"rounded"}),!X&&o(p,{$isFullScreen:D,$isVisible:!C,children:[n(x,{onClick:Y,onMouseDown:Z,$progress:N}),o(j,{$isFullScreen:D,children:[n(a,C?{onClick:K,children:n(f,{size:W})}:{onClick:J,disabled:X,children:n(h,{size:W})}),n(w,{iconSize:W,handleChangeVolume:si}),o(l,{children:[T," / ",A]}),M&&n(u,{iconFill:"#fff",disableHoverColor:!0,iconSize:W,onClick:M,children:n(v,{})}),n(a,{onClick:ni,children:D?n(b,{fill:"#fff",size:W}):n(g,{stroke:"#fff",size:W})})]})]})]})};export{F as MessageVideo};