https://app.discuss.io/assets/dio-ui/static/js/4516.108ae729.chunk.js

1"use strict";(self.webpackChunkdio_ui=self.webpackChunkdio_ui||[]).push([[4516],{16376(e,t,o){o.d(t,{A:()=>r});var n=o(65471),i=o(44414);const r=(0,n.A)((0,i.jsx)("path",{d:"M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z"}),"Launch")},48205(e,t,o){o.d(t,{A:()=>v});var n=o(58168),i=o(98587),r=o(9950),s=o(67279),a=o(52253),l=o(21209),c=o(31506),d=o(14857),u=o(70576),h=o(70827),p=o(44414);const m=["addEndListener","appear","children","container","direction","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout","TransitionComponent"];function g(e,t,o){var n;const i=function(e,t,o){const n=t.getBoundingClientRect(),i=o&&o.getBoundingClientRect(),r=(0,h.A)(t);let s;if(t.fakeTransform)s=t.fakeTransform;else{const e=r.getComputedStyle(t);s=e.getPropertyValue("-webkit-transform")||e.getPropertyValue("transform")}let a=0,l=0;if(s&&"none"!==s&&"string"===typeof s){const e=s.split("(")[1].split(")")[0].split(",");a=parseInt(e[4],10),l=parseInt(e[5],10)}return"left"===e?"translateX(".concat(i?i.right+a-n.left:r.innerWidth+a-n.left,"px)"):"right"===e?"translateX(-".concat(i?n.right-i.left-a:n.left+n.width-a,"px)"):"up"===e?"translateY(".concat(i?i.bottom+l-n.top:r.innerHeight+l-n.top,"px)"):"translateY(-".concat(i?n.top-i.top+n.height-l:n.top+n.height-l,"px)")}(e,t,"function"===typeof(n=o)?n():n);i&&(t.style.webkitTransform=i,t.style.transform=i)}const v=r.forwardRef((function(e,t){const o=(0,d.A)(),v={enter:o.transitions.easing.easeOut,exit:o.transitions.easing.sharp},f={enter:o.transitions.duration.enteringScreen,exit:o.transitions.duration.leavingScreen},b=e.addEndListener,x=e.appear,w=void 0===x||x,A=e.children,y=e.container,k=e.direction,E=void 0===k?"down":k,C=e.easing,j=void 0===C?v:C,z=e.in,V=e.onEnter,R=e.onEntered,S=e.onEntering,T=e.onExit,N=e.onExited,I=e.onExiting,F=e.style,M=e.timeout,L=void 0===M?f:M,H=e.TransitionComponent,W=void 0===H?s.Ay:H,B=(0,i.A)(e,m),D=r.useRef(null),O=(0,c.A)((0,a.A)(A),D,t),P=e=>t=>{e&&(void 0===t?e(D.current):e(D.current,t))},X=P(((e,t)=>{g(E,e,y),(0,u.q)(e),V&&V(e,t)})),Y=P(((e,t)=>{const i=(0,u.c)({timeout:L,style:F,easing:j},{mode:"enter"});e.style.webkitTransition=o.transitions.create("-webkit-transform",(0,n.A)({},i)),e.style.transition=o.transitions.create("transform",(0,n.A)({},i)),e.style.webkitTransform="none",e.style.transform="none",S&&S(e,t)})),_=P(R),q=P(I),G=P((e=>{const t=(0,u.c)({timeout:L,style:F,easing:j},{mode:"exit"});e.style.webkitTransition=o.transitions.create("-webkit-transform",t),e.style.transition=o.transitions.create("transform",t),g(E,e,y),T&&T(e)})),J=P((e=>{e.style.webkitTransition="",e.style.transition="",N&&N(e)})),K=r.useCallback((()=>{D.current&&g(E,D.current,y)}),[E,y]);return r.useEffect((()=>{if(z||"down"===E||"right"===E)return;const e=(0,l.A)((()=>{D.current&&g(E,D.current,y)})),t=(0,h.A)(D.current);return t.addEventListener("resize",e),()=>{e.clear(),t.removeEventListener("resize",e)}}),[E,z,y]),r.useEffect((()=>{z||K()}),[z,K]),(0,p.jsx)(W,(0,n.A)({nodeRef:D,onEnter:X,onEntered:_,onEntering:Y,onExit:G,onExited:J,onExiting:q,addEndListener:e=>{b&&b(D.current,e)},appear:w,in:z,timeout:L},B,{children:(e,t)=>r.cloneElement(A,(0,n.A)({ref:O,style:(0,n.A)({visibility:"exited"!==e||z?void 0:"hidden"},F,A.props.style)},t))}))}))},54516(e,t,o){o.r(t),o.d(t,{default:()=>L});var n=o(9950),i=o(81422),r=o(78317),s=o(51264),a=o(5544),l=o(70821),c=o(98587),d=o(58168),u=o(60533),h=o(88465),p=o(24184),m=o(61676),g=o(18463),v=o(1763),f=o(423);function b(e){return(0,f.Ay)("MuiFab",e)}const x=(0,v.A)("MuiFab",["root","primary","secondary","extended","circular","focusVisible","disabled","colorInherit","sizeSmall","sizeMedium","sizeLarge","info","error","warning","success"]);var w=o(59254),A=o(19608),y=o(44414);const k=["children","className","color","component","disabled","disableFocusRipple","focusVisibleClassName","size","variant"],E=(0,w.Ay)(p.A,{name:"MuiFab",slot:"Root",shouldForwardProp:e=>(0,A.A)(e)||"classes"===e,overridesResolver:(e,t)=>{const o=e.ownerState;return[t.root,t[o.variant],t["size".concat((0,m.A)(o.size))],"inherit"===o.color&&t.colorInherit,t[(0,m.A)(o.size)],t[o.color]]}})((e=>{let t=e.theme,o=e.ownerState;var n,i;return(0,d.A)({},t.typography.button,{minHeight:36,transition:t.transitions.create(["background-color","box-shadow","border-color"],{duration:t.transitions.duration.short}),borderRadius:"50%",padding:0,minWidth:0,width:56,height:56,zIndex:(t.vars||t).zIndex.fab,boxShadow:(t.vars||t).shadows[6],"&:active":{boxShadow:(t.vars||t).shadows[12]},color:t.vars?t.vars.palette.text.primary:null==(n=(i=t.palette).getContrastText)?void 0:n.call(i,t.palette.grey[300]),backgroundColor:(t.vars||t).palette.grey[300],"&:hover":{backgroundColor:(t.vars||t).palette.grey.A100,"@media (hover: none)":{backgroundColor:(t.vars||t).palette.grey[300]},textDecoration:"none"},["&.".concat(x.focusVisible)]:{boxShadow:(t.vars||t).shadows[6]}},"small"===o.size&&{width:40,height:40},"medium"===o.size&&{width:48,height:48}

1,"extended"===o.variant&&{borderRadius:24,padding:"0 16px",width:"auto",minHeight:"auto",minWidth:48,height:48},"extended"===o.variant&&"small"===o.size&&{width:"auto",padding:"0 8px",borderRadius:17,minWidth:34,height:34},"extended"===o.variant&&"medium"===o.size&&{width:"auto",padding:"0 16px",borderRadius:20,minWidth:40,height:40},"inherit"===o.color&&{color:"inherit"})}),(e=>{let t=e.theme,o=e.ownerState;return(0,d.A)({},"inherit"!==o.color&&"default"!==o.color&&null!=(t.vars||t).palette[o.color]&&{color:(t.vars||t).palette[o.color].contrastText,backgroundColor:(t.vars||t).palette[o.color].main,"&:hover":{backgroundColor:(t.vars||t).palette[o.color].dark,"@media (hover: none)":{backgroundColor:(t.vars||t).palette[o.color].main}}})}),(e=>{let t=e.theme;return{["&.".concat(x.disabled)]:{color:(t.vars||t).palette.action.disabled,boxShadow:(t.vars||t).shadows[0],backgroundColor:(t.vars||t).palette.action.disabledBackground}}})),C=n.forwardRef((function(e,t){const o=(0,g.b)({props:e,name:"MuiFab"}),n=o.children,i=o.className,r=o.color,s=void 0===r?"default":r,a=o.component,l=void 0===a?"button":a,p=o.disabled,v=void 0!==p&&p,f=o.disableFocusRipple,x=void 0!==f&&f,w=o.focusVisibleClassName,A=o.size,C=void 0===A?"large":A,j=o.variant,z=void 0===j?"circular":j,V=(0,c.A)(o,k),R=(0,d.A)({},o,{color:s,component:l,disabled:v,disableFocusRipple:x,size:C,variant:z}),S=(e=>{const t=e.color,o=e.variant,n=e.classes,i=e.size,r={root:["root",o,"size".concat((0,m.A)(i)),"inherit"===t?"colorInherit":t]},s=(0,h.A)(r,b,n);return(0,d.A)({},n,s)})(R);return(0,y.jsx)(E,(0,d.A)({className:(0,u.A)(S.root,i),component:l,disabled:v,focusRipple:!x,focusVisibleClassName:(0,u.A)(S.focusVisible,w),ownerState:R,ref:t},V,{classes:S,children:n}))})),j=C;var z=o(48205),V=o(76281),R=o(16376),S=o(50922),T=o.n(S);const N=(0,l.A)((e=>({root:{width:"100vw",height:"100vh",position:"relative"},video:{width:"100%",height:"100%"},fab:{position:"absolute",bottom:70,right:30},slideFabs:{display:"flex",flexDirection:"column",position:"absolute",bottom:126,right:30,"& button, a":{marginBottom:16}}})));const I=function(e){let t=e.video;const o=N(),i=(0,n.useState)(!1),r=(0,a.A)(i,2),s=r[0],l=r[1],c=(0,n.useState)(!1),d=(0,a.A)(c,2),u=d[0],h=d[1],p=(0,n.useRef)();return(0,y.jsxs)("div",{className:o.root,children:[(0,y.jsx)("video",{className:o.video,ref:p,onClick:()=>{s?(p.current.pause(),l(!1)):(p.current.play(),l(!0))},src:t.url,playsInline:!0}),(0,y.jsx)(j,{onClick:()=>h(!u),className:o.fab,color:"primary",children:(0,y.jsx)(V.A,{})}),(0,y.jsx)(z.A,{direction:"up",in:u,mountOnEnter:!0,unmountOnExit:!0,children:(0,y.jsx)("div",{className:o.slideFabs,children:(0,y.jsx)(j,{component:"a",href:"/project/".concat(t.projectId,"/view"),target:"_blank",sx:{"&:hover":{backgroundColor:e=>"".concat(T()(e.palette.tertiary.main).lighten(.4).string()," !important")},bgcolor:"tertiary.main",color:"white"},children:(0,y.jsx)(R.A,{})})})})]})};var F=o(76463);class M extends n.Component{constructor(){super(...arguments),this.state={allVideos:[],windowOfVideos:[],currentVideoIndex:0,loading:!0},this.componentDidMount=async()=>{const e=await F.A.getRequest("/ajax/user/clipToks");this.setState({allVideos:e,currentVideoIndex:0,loading:!1})}}render(){const e=this.state,t=e.allVideos,o=e.loading,n=this.props.classes;return o?(0,y.jsx)("div",{className:n.scroller,children:(0,y.jsx)("div",{className:n.clipTok,children:(0,y.jsx)(i.A,{sx:{bgcolor:"grey.800"},variant:"rectangle",height:180})})}):(0,y.jsx)("div",{className:n.scroller,children:t.length?t.map(((e,t)=>(0,y.jsx)("div",{className:n.clipTok,id:"clip-".concat(e.id),children:(0,y.jsx)(I,{video:e})},e.id))):(0,y.jsx)("div",{className:n.clipTok,children:(0,y.jsx)(r.A,{sx:{textAlign:"center",fontWeight:600},children:"\ud83d\ude14 No clips to watch"})})})}}const L=(0,s.A)((e=>({scroller:{height:"100vh",scrollSnapType:"y mandatory",overflowY:"scroll",overflowX:"hidden"},clipTok:{minHeight:"100%",backgroundColor:"black",scrollSnapAlign:"center",display:"flex",flexDirection:"column",justifyContent:"center",color:"white",fontSize:16}})),{withTheme:!0})(M)},76281(e,t,o){o.d(t,{A:()=>r});var n=o(65471),i=o(44414);const r=(0,n.A)((0,i.jsx)("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"}),"MoreVert")}}]);