{"version":3,"sources":["../ui/src/components/player-components/viewersChart/viewersChart.tsx"],"sourcesContent":["import {memo, useEffect, useRef} from \"react\";\r\nimport { Chart, registerables } from \"chart.js\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../../../redux/hooks\";\r\nimport { ConditionName } from \"../../../../../interfaces\";\r\nimport { conditions, responseValidator, videoTag } from \"../../../../../helpers\";\r\nimport { API, apiCaller } from \"../../../../../services\";\r\nimport { setChartPoints } from \"../../../../../redux/slices/videoDataSlice\";\r\nimport { shallowEqual } from 'react-redux'\r\nChart.register(...registerables);\r\n\r\nconst ViewersChart = () => {\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { chartPoints } = useAppSelector(({ videoData: { chartPoints, isComplexPortrait } }) => ({ chartPoints, isComplexPortrait }), shallowEqual);\r\n    const chartRef = useRef<any>(null);\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.hasChart)) {\r\n            if (conditions(ConditionName.isLiveParam)) handleChart(chartPoints);\r\n            else {\r\n                (async () => {\r\n                    const { data, status } = await apiCaller({ url: API().getViewersWindow })\r\n                    if (responseValidator(status)) {\r\n                        if (data.windows.length) {\r\n                            const points: number[] = []\r\n                            data.windows.map((window: { window_number: number, viewers: number }) => points.push(window.viewers));\r\n                            dispatch(setChartPoints(points));\r\n                        }\r\n                    }\r\n                })()\r\n            }\r\n        }\r\n    }, [])\r\n\r\n    const handleChart = (points: number[]) => {\r\n        if (conditions(ConditionName.hasChartPoints)) {\r\n            const viewersChart: any = document.getElementById('viewersChart')!\r\n            var ctx: any = viewersChart.getContext('2d');\r\n            chartRef.current = new Chart(ctx, {\r\n                type: 'line',\r\n                data: {\r\n                    labels: points,\r\n                    datasets: [{\r\n                        data: points,\r\n                        backgroundColor: \"rgba(247, 248, 253, 0.3)\",\r\n                        fill: true,\r\n                        tension: 0.5\r\n                    },\r\n                    ]\r\n                },\r\n                options: {\r\n                    plugins: {\r\n                        tooltip: { enabled: false },\r\n                        legend: { display: false },\r\n                    },\r\n                    scales: {\r\n                        x: {\r\n                            display: false,\r\n                            ticks: {\r\n                                stepSize: points.length >= 1000 ? videoTag().duration / 1000 : 2\r\n                            }\r\n                        },\r\n                        y: {\r\n                            display: false\r\n                        }\r\n                    },\r\n                    elements: {\r\n                        point: {\r\n                            radius: 0,\r\n                        },\r\n                        line: {\r\n                            borderColor: \"transparent\"\r\n                        }\r\n                    },\r\n                    animation: {\r\n                        duration: conditions(ConditionName.isLiveParam) ? 0 : 500\r\n                    }\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (!conditions(ConditionName.isLiveParam)) handleChart(chartPoints);\r\n    }, [chartPoints.length])\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.hasChartPoints) && conditions(ConditionName.isLiveParam) && !!chartRef.current) {\r\n            chartRef.current.data.datasets[0].data = chartPoints;\r\n            chartRef.current.update();\r\n        }\r\n    })\r\n\r\n    return (\r\n        <>\r\n            {!!conditions(ConditionName.hasChartPoints) && (\r\n                <div className={`pl-absolute pl-bottom-full pl-w-full pl-h-[48px] ${!conditions(ConditionName.isTouchScreenPortrait) && \"pl-mb-[10px]\"}`}>\r\n                    <div className=\"pl-w-full pl-h-full pl-flex pl-mx-auto pl-my-auto\">\r\n                        <div className='pl-relative pl-pt-0 pl-w-full pl-h-full pl-my-auto pl-shadow-xl'>\r\n                            <canvas className=\"pl-absolute !pl-w-full !pl-h-full\" id='viewersChart' style={{ height: 400 }}></canvas>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            )}\r\n        </>\r\n    )\r\n}\r\n\r\nexport default memo(ViewersChart);"],"mappings":"wMAAAA,IAAA,OAAQ,QAAAC,EAAM,aAAAC,EAAW,UAAAC,MAAa,QACtC,OAAS,SAAAC,EAAO,iBAAAC,MAAqB,WAMrC,OAAS,gBAAAC,MAAoB,cAuFrB,mBAAAC,EAKoB,OAAAC,MALpB,oBAtFRC,EAAM,SAAS,GAAGC,CAAa,EAE/B,IAAMC,EAAe,IAAM,CAEvB,IAAMC,EAAWC,EAAe,EAC1B,CAAE,YAAAC,CAAY,EAAIC,EAAe,CAAC,CAAE,UAAW,CAAE,YAAAD,EAAa,kBAAAE,CAAkB,CAAE,KAAO,CAAE,YAAAF,EAAa,kBAAAE,CAAkB,GAAIV,CAAY,EAC1IW,EAAWC,EAAY,IAAI,EAEjCC,EAAU,IAAM,CACRC,YAAiC,IAC7BA,eAAoC,EAAGC,EAAYP,CAAW,GAE7D,SAAY,CACT,GAAM,CAAE,KAAAQ,EAAM,OAAAC,CAAO,EAAI,MAAMC,EAAU,CAAE,IAAKC,EAAI,EAAE,gBAAiB,CAAC,EACxE,GAAIC,EAAkBH,CAAM,GACpBD,EAAK,QAAQ,OAAQ,CACrB,IAAMK,EAAmB,CAAC,EAC1BL,EAAK,QAAQ,IAAKM,GAAuDD,EAAO,KAAKC,EAAO,OAAO,CAAC,EACpGhB,EAASiB,EAAeF,CAAM,CAAC,CACnC,CAER,GAAG,EAGf,EAAG,CAAC,CAAC,EAEL,IAAMN,EAAeM,GAAqB,CACtC,GAAIP,kBAAuC,EAAG,CAE1C,IAAIU,EADsB,SAAS,eAAe,cAAc,EACpC,WAAW,IAAI,EAC3Cb,EAAS,QAAU,IAAIR,EAAMqB,EAAK,CAC9B,KAAM,OACN,KAAM,CACF,OAAQH,EACR,SAAU,CAAC,CACP,KAAMA,EACN,gBAAiB,2BACjB,KAAM,GACN,QAAS,EACb,CACA,CACJ,EACA,QAAS,CACL,QAAS,CACL,QAAS,CAAE,QAAS,EAAM,EAC1B,OAAQ,CAAE,QAAS,EAAM,CAC7B,EACA,OAAQ,CACJ,EAAG,CACC,QAAS,GACT,MAAO,CACH,SAAUA,EAAO,QAAU,IAAOI,EAAS,EAAE,SAAW,IAAO,CACnE,CACJ,EACA,EAAG,CACC,QAAS,EACb,CACJ,EACA,SAAU,CACN,MAAO,CACH,OAAQ,CACZ,EACA,KAAM,CACF,YAAa,aACjB,CACJ,EACA,UAAW,CACP,SAAUX,eAAoC,EAAI,EAAI,GAC1D,CACJ,CACJ,CAAC,CACL,CACJ,EAEA,OAAAD,EAAU,IAAM,CACPC,eAAoC,GAAGC,EAAYP,CAAW,CACvE,EAAG,CAACA,EAAY,MAAM,CAAC,EAEvBK,EAAU,IAAM,CACRC,kBAAuC,GAAKA,eAAoC,GAAOH,EAAS,UAChGA,EAAS,QAAQ,KAAK,SAAS,CAAC,EAAE,KAAOH,EACzCG,EAAS,QAAQ,OAAO,EAEhC,CAAC,EAGGT,EAAAD,EAAA,CACK,UAAC,CAACa,kBAAuC,GACtCZ,EAAC,OAAI,UAAW,oDAAoD,CAACY,yBAA8C,GAAK,cAAc,GAClI,SAAAZ,EAAC,OAAI,UAAU,oDACX,SAAAA,EAAC,OAAI,UAAU,kEACX,SAAAA,EAAC,UAAO,UAAU,oCAAoC,GAAG,eAAe,MAAO,CAAE,OAAQ,GAAI,EAAG,EACpG,EACJ,EACJ,EAER,CAER,EAEOwB,EAAQC,EAAKtB,CAAY","names":["init_esm_shims","memo","useEffect","useRef","Chart","registerables","shallowEqual","Fragment","jsx","Chart","registerables","ViewersChart","dispatch","useAppDispatch","chartPoints","useAppSelector","isComplexPortrait","chartRef","useRef","useEffect","conditions","handleChart","data","status","apiCaller","API","responseValidator","points","window","setChartPoints","ctx","videoTag","viewersChart_default","memo"]}