const queryString=window.location.search,parameters=new URLSearchParams(queryString),short_id_query=parameters.get("short"),GetRequest=t=>new Promise(((e,n)=>{fetch(t,{method:"GET",mode:"cors"}).then((t=>{t.status>=200&&t.status<=299?t.text().then((t=>{e(t)})):n(new Error)})).catch((t=>n(t)))})),GetRequestParseJSON=async t=>new Promise(((e,n)=>{GetRequest(t).then((t=>{e(JSON.parse(t))})).catch(n)})),JSONPostRequest=(t,e)=>new Promise(((n,s)=>{fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:e,mode:"cors"}).then((t=>{t.status>=200&&t.status<=299?t.json().then((t=>{n(t)})):s(new Error)})).catch((t=>s(t)))}));class Action{_subs=[];constructor(...t){this._subs=t}AddCallback(t){if("function"!=typeof t)throw new Error("Invalid parameter type for 'callback': "+typeof t+". Expected 'function'.");this._subs.push(t)}RemoveCallback(t){this._subs.splice(this._subs.findIndex((e=>e==t)))}Invoke(t){for(let e=0;e<this._subs.length;e++)null!=this._subs[e]&&this._subs[e](t)}}const APIBaseURL="https://dapp.isotopic.io",API={GetGameDetails:t=>new Promise(((e,n)=>{GetRequest(`https://dapp.isotopic.io/api/v1/store/details/${t}`).then((t=>{e(JSON.parse(t))})).catch((t=>{n(t)}))})),GetGameImageSrcURL:t=>`https://dapp.isotopic.io/api/v1/store/files/${app_id}/page_images/?index=${t}`,GetGameMainImageSrcURL:()=>`https://dapp.isotopic.io/api/v1/store/files/${app_id}/page_main_image`,GetAppCategories:()=>new Promise(((t,e)=>{GetRequest("https://dapp.isotopic.io/api/v1/store/categories").then((e=>{t(JSON.parse(e))})).catch((t=>e(t)))})),GetShortsFeed:()=>GetRequestParseJSON("https://dapp.isotopic.io/api/v1/shorts/feed/get_feed"),GetShortByID:t=>GetRequestParseJSON(`https://dapp.isotopic.io/api/v1/shorts/${t}/details`),GetComments:t=>new Promise(((e,n)=>{GetRequest(`https://dapp.isotopic.io/api/v1/shorts/comments/${t}`).then((t=>{e(JSON.parse(t))})).catch((t=>{n(t)}))})),AddNewComment:(t,e,n=null)=>JSONPostRequest(`https://dapp.isotopic.io/api/v1/store/comments/${t}/post`,JSON.stringify({session_id:User.GetSessionID(),content:e,parent_id:n}))},OpenAndWaitForLogin=()=>new Promise(((t,e)=>{$("body").addClass("edgtf-right-side-menu-opened"),$(".edgtf-side-menu-button-opener, .edgtf-icon-has-hover, .edgtf-side-menu-button-opener-svg-path").addClass("opened");const n=e=>{t(e),MyAccount.OnAccountSet.RemoveCallback(n)};MyAccount.OnAccountSet.AddCallback(n)}));let storesidebarRes=GetRequest("https://dapp.isotopic.io/games-page/sidebar").catch((t=>{throw t}));const getAppCategoriesPromise=API.GetAppCategories();$("head").append('<link rel="stylesheet" href="https://dapp.isotopic.io/games-page/css" type="text/css" />'),$(document).ready((async()=>{const t=$("#store-sidebar");storesidebarRes.then((e=>{t.html(e)}));const e=import("https://dapp.isotopic.io/modules/video.min.js"),n=$("#shorts-container");let s;n.append(`<div id="page-loading-parent" style="display: flex; flex-direction: column; height: 50%; align-items: center; justify-content: center;"> \n    <svg id="page-loading-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: none; display: inline; shape-rendering: auto;height: 4em;line-height: 1; top: 0.5em; " viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">\n        <style>\n            #page-loading-svg{\n                animation: loading-spinner 1.2s steps(9, start) infinite\n            }\n            @keyframes loading-spinner{\n                from{\n                    transform: rotate(0deg)\n                }\n                to{\n                    transform: rotate(360deg)\n                }\n            }\n        </style>\n        <g transform="rotate(0 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#222222">\n        </rect>\n        </g><g transform="rotate(40 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#404040">\n        </rect>\n        </g><g transform="rotate(80 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#5f5f5f">\n        </rect>\n        </g><g transform="rotate(120 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#777777">\n        </rect>\n        </g><g transform="rotate(160 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#9f9f9f">\n        </rect>\n        </g><g transform="rotate(200 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#bbbbbb">\n        </rect>\n        </g><g transform="rotate(240 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#cfcfcf">\n        </rect>\n        </g><g transform="rotate(280 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#eeeeee">\n        </rect>\n        </g><g transform="rotate(320 50 50)">\n        <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">\n        </rect>\n        </g>\n        </svg> <h6>${"Loading Shorts..."}</h6></div>\n    `);try{s=await API.GetShortsFeed(),$("#page-loading-parent").remove()}catch{let t=()=>{ShowPopupModal("An error occured. Could not retrieve shorts feed.",t)};t()}(async()=>{n.append('\n            <h4 class="decorated-header-red">\n                <span style="padding-left: 0;">Isotopic Shorts</span>\n            </h4>\n            <style>\n            .clickable {\n                cursor: pointer;\n            }\n            .fluidvids {\n                height: 400px;\n            }\n            svg {\n                pointer-events: none;\n            }\n            div.clickable:hover > h6 {\n                color: red;\n            }\n            #expand-game-desc:hover {\n                text-decoration: underline;\n            }\n            @media screen and (max-width: 640px) {\n                .single-game-extras-txt-with-img {\n                    display: none;\n                }\n                #game-image-under-short{\n                    display: none;\n                }\n                .single-game-extras-txt {\n                    width: unset !important;\n                }\n                .single-game-extras-txt > h6 {\n                    font-size: 14px !important;\n                }\n            }\n            .vjs-play-control{\n                display:none !important;;\n            }\n            .vjs-control-bar{\n                border-radius: 0 0 14px 14px;\n            }\n            </style>\n                \n            <div class="single-game-main-wrapper" style="flex-flow: column;">\n                \x3c!--MAIN DISCRIPTION--\x3e\n                <div class="single-game-main-description short-main-container" style="width: 100%;height: auto; display: flex;">\n                    <div id="short-1-parent">\n                        <video-js class="shorts-player" id="shorts-player-1" data-setup=\'{ "controls": true, "preload": "auto"}\'>\n                            <source id="shorts-player-source-1" src="https://dapp.isotopic.io/media/banner-top/ISOTOPIC-FULL-RELEASE.webm" type="video/webm">\n                        </video-js> \n                    </div>   \n                    <div id="short-2-parent">\n                        <video-js class="shorts-player vjs-hidden" id="shorts-player-2" data-setup=\'{ "controls": true, "preload": "auto"}\'>\n                            <source id="shorts-player-source-2" src="https://dapp.isotopic.io/media/banner-top/ISOTOPIC-FULL-RELEASE.webm" type="video/webm">\n                        </video-js>\n                    </div>   \n                    <div class="single-game-extras-holder" style="margin: 15px 0 0 0; width: 100%; max-height: 150px; padding: 20px 0px;">\n            \n                        <img id="game-image-under-short" src="" class="" style="aspect-ratio: 1/1.5; width: 7%;">\n                        <div class="single-game-extras-txt-with-img" style="height: auto;">\n                            <h6><a id="game-href-under-short" href="">GAME ON ISOTOPIC! \n    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.000000 638.000000" preserveAspectRatio="xMidYMid meet" width="30px" height="25px">\n        <g transform="translate(0.000000,638.000000) scale(0.100000,-0.100000)" fill="white" stroke="none">\n            <path d="M1934 6361 c-180 -51 -327 -220 -356 -409 -9 -59 -8 -86 6 -158 31\n            -159 95 -255 228 -340 46 -29 70 -52 74 -69 9 -34 -63 -1210 -76 -1257 -13\n            -47 -65 -116 -109 -145 -49 -33 -369 -133 -425 -133 -26 0 -61 7 -79 17 -36\n            18 -455 424 -474 459 -9 15 -12 60 -10 136 2 109 1 116 -30 180 -37 79 -98\n            142 -173 177 -47 22 -69 26 -145 26 -77 0 -98 -4 -145 -26 -84 -40 -135 -90\n            -176 -174 -32 -64 -36 -83 -37 -148 0 -62 5 -85 30 -138 55 -117 169 -204 286\n            -216 36 -4 79 0 125 12 50 12 75 14 89 7 10 -6 125 -118 255 -249 207 -208\n            238 -243 238 -270 0 -19 -21 -66 -54 -124 -30 -52 -69 -137 -87 -189 -28 -84\n            -33 -111 -37 -230 -3 -109 0 -154 16 -232 50 -242 178 -426 400 -578 125 -85\n            172 -155 172 -258 0 -34 -15 -78 -56 -171 -31 -69 -120 -270 -198 -446 -162\n            -364 -146 -344 -294 -374 -170 -35 -287 -121 -356 -263 -84 -171 -88 -374 -10\n            -518 36 -67 147 -170 217 -204 209 -99 490 -62 651 85 115 105 166 219 166\n            371 0 209 -71 360 -212 454 -37 25 -70 49 -73 54 -6 9 366 856 407 927 41 70\n            110 154 149 180 21 14 78 36 126 50 49 13 146 52 217 85 149 71 195 79 276 51\n            38 -13 193 -115 510 -337 250 -176 474 -334 496 -352 35 -28 43 -41 49 -81 15\n            -108 84 -191 184 -220 167 -48 330 75 331 250 0 74 -17 114 -75 176 -65 69\n            -112 86 -218 77 l-83 -7 -380 266 c-208 146 -390 277 -404 289 -23 22 -46 36\n            -142 87 -39 20 -118 98 -129 127 -5 13 -9 200 -9 416 l0 393 29 40 c16 22 42\n            49 58 60 40 29 330 173 347 173 8 0 105 45 216 100 110 55 211 100 223 100 12\n            0 49 -14 81 -30 200 -101 439 63 423 290 -8 118 -89 228 -194 264 -74 25 -179\n            21 -241 -10 -102 -51 -172 -160 -172 -269 0 -72 34 -53 -495 -273 -389 -162\n            -396 -164 -486 -109 -30 18 -79 48 -109 67 -65 39 -126 95 -146 131 -34 66\n            -34 104 -4 640 16 288 32 580 36 649 4 74 12 133 19 146 8 12 34 27 60 34 58\n            16 148 70 198 118 203 195 205 516 3 718 -126 126 -318 175 -492 125z m31\n            -2634 c114 -38 198 -90 291 -183 68 -67 89 -96 127 -175 59 -123 72 -180 72\n            -319 0 -138 -13 -197 -70 -315 -121 -250 -353 -395 -632 -395 -312 0 -573 180\n            -677 469 -71 197 -53 403 51 590 54 99 187 226 290 279 126 65 204 83 348 78\n            95 -2 136 -9 200 -29z"></path>\n            <path d="M1665 3684 c-122 -19 -248 -81 -343 -169 -70 -66 -142 -170 -126\n            -184 5 -5 74 -39 153 -75 133 -61 145 -65 154 -49 21 39 97 101 143 117 56 19\n            146 21 195 4 53 -18 117 -66 146 -109 14 -21 32 -39 39 -39 16 0 274 118 289\n            131 18 17 -37 101 -120 185 -65 66 -96 89 -165 121 -47 23 -107 46 -133 52\n            -56 13 -187 22 -232 15z"></path>\n            <path d="M1133 3197 c-13 -22 -16 -236 -3 -300 31 -162 130 -309 270 -402 108\n            -72 272 -124 291 -94 10 16 12 250 3 296 -4 22 -18 35 -62 58 -102 54 -153\n            123 -171 234 -5 34 -13 66 -17 72 -3 6 -54 34 -113 61 -177 84 -190 88 -198\n            75z"></path>\n            <path d="M2210 3117 l-154 -72 -16 -65 c-27 -114 -92 -195 -184 -230 l-26 -10\n            0 -170 0 -170 28 0 c16 0 53 7 83 16 262 76 464 371 446 649 -10 140 2 136\n            -177 52z"></path>\n        </g>\n    </svg>\n    </a></h6>\n                        </div>\n                        \n                        <div id="pause-short-button" class="single-game-extras-txt clickable" style="width: 24%; height: auto;">\n                            <h6 id="pause-button-text">\n                                PLAY SHORT\n                            </h6>\n                        </div>\n                        <div id="next-short-button" class="single-game-extras-txt clickable" style="width: 24%;height: auto;">\n                            <h6>\n                                NEXT SHORT\n                            </h6>\n                        </div>\n                        \n                    </div>\n                </div>\n                \n\n                <div class="single-game-details  flex-column span-width" style="width: 100%;">\n                    <div class="single-game-details-item" style="width: 100%;">\n                        <h6 class="decorated-header text-accent unset-capitalization">\n                            <span id="short-title">Loading</span>\n                        </h6>\n                    </div>\n\n\n                    <div id="short-description" class="span-width">\n                    </div>\n                    <br>\n    \n                </div>\n\n                <div class="single-game-details  flex-column span-width" style="width: 100%;">\n                    <div class="single-game-details-item" style="width: 100%;">\n                        <h6 class="decorated-header text-accent unset-capitalization">\n                            <span id="game-title">Loading</span>\n                        </h6>\n                    </div>\n\n\n                    <div id="game-description" class="span-width">\n                    </div>\n\n                    <p class="clickable" id="expand-game-desc">&gt Expand full game description.</p>\n                    <div id="expanded-details">\n                    </div>\n                </div>\n                <div class="single-game-details  flex-column span-width" style="width: 100%;">\n                    <div class="single-game-details-item" style="width: 100%;">\n                        <h6 class="decorated-header text-accent unset-capitalization">\n                            <span>BECOME AN ISOTOPIC SHORTS CREATOR</span>\n                        </h6>\n                    </div>\n\n\n                    <div class="span-width">\n                        <p>Are you a Game Developer working on a cool game project? Register your account at Isotopic, create a page for your game within minutes, and start uploading video content to the Isotopic shorts platform.<br></p>\n                        <div id="upload-short-button" class="download-button desktop-visible" style="width: 40%;">\n                            <h6 class="sidebar-h6">BECOME AN ISOTOPIC CREATOR</h6>\n                            <svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" viewBox="0 0 24 24" style="width: 20%;height: 65%; padding-right: 8px;"><path d="M8.71,7.71,11,5.41V15a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-4,4A1,1,0,1,0,8.71,7.71ZM21,12a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V13a1,1,0,0,0-2,0v6a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12Z"></path></svg>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n\n        '),$("#upload-short-button").click((()=>{window.location.hash="#publish-game"})),await e;const t=videojs("shorts-player-1"),a=videojs("shorts-player-2");let i,o,r=new Promise(((t,e)=>{i=t})),d=new Promise(((t,e)=>{o=t}));t.ready(i),a.ready(o),await Promise.all([r,d]),t.on("volumechange",(()=>{a.volume(t.volume()),a.muted(t.muted())})),a.on("volumechange",(()=>{t.volume(a.volume()),t.muted(a.muted())}));const l=$("#short-1-parent"),c=$("#short-2-parent"),p=$("#short-description"),h=$("#short-title"),g=$("#game-description"),u=$("#game-title");let m=s.shorts,w=s.session_id,x=!1;function f(t){let e=JSON.parse(t.metadata).extension;return{src:`https://dapp.isotopic.io/api/v1/shorts/${t.short_id}${e}?session_id=${w}`,mime:`video/${e.substr(1)}`}}let v=0;async function y(){if(v<m.length-1)return m[++v];{let t=await API.GetShortsFeed();return m=t.shorts,w=t.session_id,v=0,m[0]}}async function b(t){p.text(t.description),h.text(t.title),$("#expand-game-desc").css("display","unset"),$("#expanded-details").css("display","none"),$("#game-image-under-short").attr("src",`https://dapp.isotopic.io/api/v1/store/files/${t.app_id}/page_main_image`),$("#game-href-under-short").attr("href",`https://isotopic.io/game/?game=${t.app_id}`);let e=await API.GetGameDetails(t.app_id);$("#expanded-details").html("<br>"+e.details_html),g.text(e.short_description),u.text(e.title);try{const e=new URL(window.location);e.searchParams.set("short",t.short_id),history.pushState({},"",e)}catch{}}if($("#expand-game-desc").click((async()=>{$("#expand-game-desc").css("display","none"),$("#expanded-details").css("display","unset")})),null!=short_id_query){let e=await API.GetShortByID(short_id_query);"fail"!=e.result?(t.src(f(e.short)),await b(e.short),v=-1):(t.src(f(m[0])),await b(m[v]))}else t.src(f(m[0])),await b(m[v]);let S=await new Promise(((t,e)=>{$("#pause-short-button").click((()=>{t(!1),$("#pause-button-text").text("PAUSE"),$("#next-short-button").off("click"),$("#pause-short-button").off("click"),l.off("click")})),l.click((()=>{t(!1),$("#pause-button-text").text("PAUSE"),$("#next-short-button").off("click"),$("#pause-short-button").off("click"),l.off("click")})),$("#next-short-button").click((async()=>{t(!0),$("#next-short-button").off("click"),$("#pause-short-button").off("click"),l.off("click"),$("#pause-button-text").text("PAUSE")}))}));await t.play();let P=1;a.src(f(await y())),t.on("ended",(async()=>{t.hide(),a.show(),await b(m[v]),await a.play(),P=2,t.src(f(await y())),x||(a.on("ended",(async()=>{a.hide(),t.show(),await b(m[v]),await t.play(),P=1,a.src(f(await y()))})),x=!0)}));let A=e=>1==e?t:a,k=!1;function O(){k?(A(P).play(),$("#pause-button-text").text("PAUSE")):(A(P).pause(),$("#pause-button-text").text("PLAY")),k=!k}$("#pause-short-button").click((()=>{O()})),l.click(O),c.click(O);let _=!1;$("#next-short-button").click((async()=>{if(_)return;_=!0;let t=A(P),e=A(1==P?2:1);t.pause(),t.hide(),e.show(),await b(m[v]),await e.play(),P=1==P?2:1,t.src(f(await y())),_=!1,k=!1,$("#pause-button-text").text("PAUSE")})),S&&$("#next-short-button").click()})()}));