@tycoonsystems/tycoon-modules/modules/search/feature/Feature.js

www.tv.tycoon.systems/documentation

import React from"react";import Image from"next/image";import Link from"next/link";import FeatureStyles from"./Feature.module.scss";import{useRouter}from"next/router";import{compareObjects,isObjectEmpty}from"../../util";import{fetchSearchData}from"../../utility/search";import{v4 as uuidv4}from"uuid";const isOverflown=(e,t,a,r)=>t<r||e<a,Module=a=>{var[,,]=React.useState(null);const[t,r]=React.useState(!1),[n,i]=React.useState(null),[l,s]=React.useState(!1),[e,,]=React.useState([]),[c,u]=React.useState([]),[m,o]=React.useState({}),[d,h]=React.useState({size:"thin"}),[g,R]=React.useState(!1),[v,S]=React.useState(null),[f,E]=React.useState(null),[y,F]=React.useState(!1),[N,p]=React.useState(-1);useRouter();const C=React.useRef(),_=React.useRef();n&&(a._LocalEventEmitter.unsubscribe(n),a._LocalEventEmitter.subscribe(n,e=>{e&&e.dispatch&&"checkContainerOverflown"===e.dispatch&&T()})),React.useEffect(()=>{var e;t||(r((new Date).getTime()),a.stagger?C.current=setTimeout(()=>{R(!0)},a.stagger):R(!0),e=uuidv4(),i(e))},[t,a.stagger]),React.useEffect(()=>{var e;n&&a._LocalEventEmitter&&!f&&(e=setInterval(()=>{a._LocalEventEmitter.dispatch(n,{dispatch:"checkContainerOverflown"})},5e3),E(e))},[a._LocalEventEmitter,n,f]),React.useEffect(()=>{var e;g&&a.defaultSize&&((e={...d}).size=a.defaultSize,h(e))},[g]);var z=React.useCallback(e=>{var t;d&&(t={...d},console.log(_.current),"thin"===t.size?t.size="thin"!==a.defaultSize?a.defaultSize:"medium":"medium"===t.size?t.size="medium"!==a.defaultSize?a.defaultSize:"thin":"large"===t.size&&(t.size="large"!==a.defaultSize?a.defaultSize:"thin"),h(t))});React.useEffect(()=>{(async()=>{var e=a.featureData?"featureData":"noSelection",t=isObjectEmpty(m)?a[e]:m;t&&!l&&N<(new Date).getTime()-1e4&&(p((new Date).getTime()),s(!0),t.user?(s(!1),o(a[e])):(t={identifier:a?._loggedIn?.identifier??"",hash:a?._loggedIn?.hash??"",domainKey:a.domainKey,params:{u:a?._loggedIn?.identifier??"",s:a.s??""}},t=await fetchSearchData(a.apiUrl,["featureData"],t),s(!1),t&&t.data&&t.data[e]&&o(t.data[e])))})()},[a.featureData,m,e,l,c,a._loggedIn,a.domainKey]),React.useEffect(()=>{var t=m.data&&Array.isArray(m.data)?m.data.concat(e):[];for(let e=0;e<c.length&&compareObjects(c,t);e++);0===c.length&&0!==t.length&&u(t)},[m]);const w=({src:e})=>e.match(/greythumb/)?""+e:a.cdn&&a.cdn.static&&0<a.cdn.static.length?a.cdn.static+"/"+e:void 0,T=()=>{if(!v||v&&v<(new Date).getTime()-5e3){if(_.current){S((new Date).getTime());var e=_.current.clientWidth,t=_.current.clientHeight,a=_.current.scrollWidth,r=_.current.scrollHeight,e=isOverflown(e,t,a,r);if(e)return F(e),e}return!1}};return console.log(a),React.createElement("div",{className:`${FeatureStyles.featureExternalContainer} ${0<c.length?"thin"===d.size?"FeatureContainerOpen":"medium"===d.size?`FeatureContainerOpen ${FeatureStyles.featureContainerOpen} FeatureContainerOpenMedium`:"large"===d.size?`FeatureContainerOpen ${FeatureStyles.featureContainerOpen} FeatureContainerOpenLarge`:"":""} `+a.className},!a.hideToggle&&0<c.length?React.createElement("div",{className:""+FeatureStyles.sizeExpandContainer},React.createElement("div",{className:""+FeatureStyles.sizeExpand,onClick:z})):React.createElement("div",null),0<c.length?React.createElement("div",{className:`${FeatureStyles.featureContainer} ${d&&d.size?"medium"===d.size?FeatureStyles.featureContainerMedium:"large"===d.size?FeatureStyles.featureContainerLarge:"":""} `+(y?"medium"===d.size?"featureContainerOverflown featureContainerOverflown_medium":"large"===d.size?"featureContainerOverflown featureContainerOverflown_large":"":""),ref:_},React.createElement("div",{className:FeatureStyles.itemContainer+" "+("thin"===d.size?FeatureStyles.itemContainerThin:"")},c.map((e,t)=>React.createElement("div",{className:`${FeatureStyles.item} ${"thin"===d.size?FeatureStyles.itemThin:"Item_ContainerMetaController Item_ContainerMetaControllerFeature"} Item_ContainerMetaControllerFeature_${d?.size??""} Feature_Item`,key:t},React.createElement(Link,{href:"w?v="+e.id,style:{position:"relative"}},"live"===e.status&&"thin"!==d.size?React.createElement("div",{className:"LiveTag "+FeatureStyles.statusContainer},"LIVE",React.createElement("div",{className:"RecordingCircle RecordingCircle_Small"})):"","thin"!==d.size?React.createElement(React.Fragment,null,React.createElement(Image,{loader:w,src:e.thumbnail&&a.cdn&&a.cdn.static?e.thumbnail:"img/default/greythumb.jpg",alt:e.title||"",width:60,height:30,layout:"responsive",className:"Feature_Img Feature_Img_Border"}),React.createElement("div",{className:"Item_GhostMeta Item_GhostMetaFeature"},!e.creation||isNaN(e.creation)||isNaN(new Date(Number(e.creation)))?null:React.createElement("div",{className:"Item_TinyMetaText Item_TinyMetaTextFeature",style:{marginBottom:".25rem",textShadow:"1px 2px 6px rgb(0 0 0 / 75%)"}},"Stream started ",new Date(Number(e.creation)).toTimeString()),React.createElement("div",{className:"Item_GhostMetaContainerInternal"},React.createElement("div",null,e.description||"Watch Livestream Now")))):null,React.createElement("div",{className:FeatureStyles.itemMetaContainer+" "+("thin"===d.size?FeatureStyles.thinMetaContainerSize:"")},React.createElement("div",{className:""+FeatureStyles.itemMetaContainerPadding},React.createElement("div",{className:""+FeatureStyles.itemMetaText},"live"===e.status&&"thin"===d.size?React.createElement("div",{className:`LiveTag ${FeatureStyles.statusContainerInline} LiveTag_Thin }`},React.createElement("div",{className:"RecordingCircle RecordingCircle_Small"})):"",React.createElement("div",{className:`flex gap-p2 ${20<(e.title.length||(e.author_username+" is Streaming Now").length)+e.author_username.length?"marquee":""} ${"thin"===d.size?FeatureStyles.thinMeta:""} `+FeatureStyles.itemMarqueeContainer},20<(e.title.length||(e.author_username+" is Streaming Now").length)+e.author_username.length?React.createElement("div",{className:"marqueeContainer "+("thin"===d?.size?""+FeatureStyles.marqueeContainerThin:"")},React.createElement("div",{className:"marquee1"},React.createElement("div",{className:""+FeatureStyles.titleText},e.title||e.author_username+" is Streaming Now"),React.createElement("span",null," - "),React.createElement("div",{className:""+FeatureStyles.authorUser},e.author_username)),React.createElement("div",{className:"marquee2"},React.createElement("div",{className:""+FeatureStyles.titleText},e.title||e.author_username+" is Streaming Now"),React.createElement("span",null," - "),React.createElement("div",{className:""+FeatureStyles.authorUser},e.author_username)),React.createElement("div",{className:"marquee3"},React.createElement("div",{className:""+FeatureStyles.titleText},e.title||e.author_username+" is Streaming Now"),React.createElement("span",null," - "),React.createElement("div",{className:""+FeatureStyles.authorUser},e.author_username))):React.createElement(React.Fragment,null,React.createElement("div",{className:""+FeatureStyles.titleText},e.title||e.author_username+" is Streaming Now"),React.createElement("span",null," - "),React.createElement("div",{className:""+FeatureStyles.authorUser},e.author_username))))))))))):null)};export default Module;