\r\n \r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n );\r\n};\r\n\r\nexport default App;\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import { useEffect, useContext } from \"react\";\r\nimport { useLocation } from \"react-router-dom\";\r\nimport { ApplicationStateContext } from \"../contexts\";\r\n\r\nconst useAds = () => {\r\n const location = useLocation();\r\n const { applicationState, applicationStateDispatch } = useContext(ApplicationStateContext);\r\n\r\n /** Effect: Load the ads though Google Tag Manager.\r\n */\r\n useEffect(() => {\r\n // No ads on the testing views.\r\n if (location.pathname.includes(\"testing\")) {\r\n return;\r\n }\r\n\r\n // Only load them once.\r\n if (applicationState.loadedAds) {\r\n return;\r\n }\r\n\r\n // Fire up Google Tag Manager.\r\n (function (w, d, s, l, i) {\r\n w[l] = w[l] || [];\r\n w[l].push({ \"gtm.start\": new Date().getTime(), event: \"gtm.js\" });\r\n var f = d.getElementsByTagName(s)[0],\r\n j = d.createElement(s),\r\n dl = l !== \"dataLayer\" ? \"&l=\" + l : \"\";\r\n j.async = true;\r\n j.src = \"https://www.googletagmanager.com/gtm.js?id=\" + i + dl;\r\n f.parentNode.insertBefore(j, f);\r\n })(window, document, \"script\", \"dataLayer\", \"GTM-T6SRVZK\");\r\n\r\n // GTM migration\r\n (function (w, e) {\r\n var s = new XMLHttpRequest();\r\n s.open(\r\n \"GET\",\r\n \"https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=systemrequirementslab.com\",\r\n !0\r\n );\r\n s.onreadystatechange = function () {\r\n var t;\r\n let x =\r\n 4 == s.readyState &&\r\n ((200 <= s.status && s.status < 300) || 304 == s.status) &&\r\n (((t = e.createElement(\"script\")).type = \"text/javascript\"),\r\n (t.text = s.responseText),\r\n e.head.appendChild(t));\r\n };\r\n s.send(null);\r\n })(window, document);\r\n\r\n // Set the ad state.\r\n applicationStateDispatch({ type: \"set\" });\r\n }, [applicationState.loadedAds, applicationStateDispatch, location.pathname]);\r\n};\r\n\r\nexport default useAds;\r\n","export default __webpack_public_path__ + \"static/media/start.aebeacab.gif\";","import React, { useContext } from \"react\";\r\nimport { Accordion } from \"react-bootstrap\";\r\nimport { Link } from \"react-router-dom\";\r\nimport useAds from \"../../hooks/UseAds\";\r\nimport start from \"../../assets/img/start.gif\";\r\nimport { LocationContext } from \"../../contexts\";\r\nimport { TargetsContext } from \"../../contexts\";\r\n\r\nexport const Home = () => {\r\n useAds();\r\n const location = useContext(LocationContext);\r\n const targets = useContext(TargetsContext);\r\n\r\n const getTargetOrdinal = (id) => {\r\n for (let n = 0; n < targets.length; ++n) {\r\n if (targets[n].id === id) return n;\r\n }\r\n };\r\n\r\n const getTarget = (sourceCountry, sourceContinent) => {\r\n // Look for a country match in targets.\r\n let found = targets.find((target) => target.countryCode.toUpperCase() === sourceCountry);\r\n if (found) {\r\n return getTargetOrdinal(found.id);\r\n }\r\n\r\n // Look for a continent match in targets.\r\n found = targets.find((target) => target.continentCode.toUpperCase() === sourceContinent);\r\n if (found) {\r\n return getTargetOrdinal(found.id);\r\n }\r\n\r\n return 0;\r\n };\r\n\r\n const getBestTarget = () => {\r\n let sourceContinent = location.continent.toUpperCase();\r\n let sourceCountry = location.country.toUpperCase();\r\n\r\n switch (sourceContinent) {\r\n case \"SA\":\r\n sourceContinent = \"NA\";\r\n break;\r\n case \"AN\":\r\n sourceContinent = \"AF\";\r\n break;\r\n case \"\":\r\n sourceContinent = \"NA\";\r\n break;\r\n default:\r\n }\r\n\r\n if (!sourceCountry || sourceCountry === \"\") {\r\n sourceCountry = \"US\";\r\n }\r\n\r\n // return getTarget(\"JP\", \"AS\");\r\n\r\n return getTarget(sourceCountry, sourceContinent);\r\n };\r\n\r\n // Render.\r\n\r\n return (\r\n <>\r\n
Do You Lag?
\r\n\r\n
Don't be that person. In just 5 seconds you can test your Latency.
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Bandwidth and Latency\r\n \r\n Let’s use an analogy of a highway. Bandwidth is the number of lanes on the highway. So, an 16-lane highway\r\n has more capacity or can handle more traffic than a 2-lane highway. The higher the bandwidth (lanes), the\r\n more traffic can move from one location to another during a specific timeframe. Bandwidth is the most used\r\n value for internet speed but it really measures the volume of information that can be transferred over a\r\n connection in a set amount of time (i.e. 80 Mbps Download and 10 Mbps Upload speed). Latency is a measure of\r\n how fast the cars travel on the highway. It is usually measured in milliseconds (ms). The lower the Latency\r\n value, the better your speed. It is a measure of how fast a packet of information goes between your location\r\n to a specific server.\r\n \r\n \r\n \r\n Jitter\r\n \r\n Jitter measures stability or the VARIATION, over time, of Latency. Data packets are sent in a continuous\r\n steady stream and are spaced evenly apart. But unforeseen issues like network congestion may alter this\r\n steady stream, or the delay between each packet can fluctuate instead of remaining constant. Kind of like\r\n rush hour traffic in Los Angeles. You may have experienced these problems on a VOIP or video conference if\r\n you lose a connection for a second or more. You want a stable connection or low Jitter.\r\n \r\n \r\n \r\n Ping\r\n \r\n Ping, which has its roots in active sonar (think submarine movies), is the signal transmitted across the\r\n network to another computer. This other computer then sends its own signal back, which is another ping. The\r\n signal is the ping. Think of Ping as a car. And the measurement of the car’s round trip is Latency.\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { Chart } from \"react-google-charts\";\r\nimport { TestsContext } from \"../../contexts\";\r\n\r\nexport const LatencyChart = (props) => {\r\n const { tests } = useContext(TestsContext);\r\n const [chartData, setData] = useState(null);\r\n const targetIndex = props.index;\r\n\r\n /** Effect: Get and format the data for the chart.\r\n */\r\n useEffect(() => {\r\n if (tests.times && tests.times[targetIndex]) {\r\n // Set the chart data.\r\n let d = [[\"\", \"\"]];\r\n\r\n for (var n = 0; n < tests.times[targetIndex].length; ++n) {\r\n d.push([n + 1, tests.times[targetIndex][n]]);\r\n }\r\n setData(d);\r\n }\r\n }, [tests, targetIndex]);\r\n\r\n /** Function: Is there any data to display?\r\n */\r\n const hasData = () => {\r\n return tests.times && tests.times[targetIndex] && chartData;\r\n };\r\n\r\n // Google chart options.\r\n var chartOptions = {\r\n legend: \"none\",\r\n pointSize: 3,\r\n hAxis: {\r\n textPosition: \"none\",\r\n gridlines: {\r\n count: 1,\r\n },\r\n },\r\n vAxis: {\r\n format: \"# ms\",\r\n minValue: 0,\r\n gridlines: {\r\n xcount: 1,\r\n },\r\n },\r\n series: [{ color: \"grey\" }],\r\n };\r\n\r\n // Render.\r\n\r\n return (\r\n <>\r\n {hasData() && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { LatencyChart } from \"./LatencyChart\";\r\nimport { TestsContext, TargetsContext } from \"../../contexts\";\r\nimport { Stat, Box } from \"../common\";\r\nimport { calculateAverage } from \"../../utilities\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Location } from \"../common\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\n\r\n/** Init the data for the chart.\r\n *\r\n */\r\n//const initJitter = (tests) => {};\r\n\r\nexport const Test = (props) => {\r\n let targets = useContext(TargetsContext);\r\n let { tests } = useContext(TestsContext);\r\n const { index } = props;\r\n const [latency, setLatency] = useState(0);\r\n const [jitter, setJitter] = useState(0);\r\n const { area, country } = targets[index];\r\n\r\n const hasData = tests !== null && Array.isArray(tests.times) && Array.isArray(tests.times[index]);\r\n\r\n /** Initialize data and stats.\r\n */\r\n useEffect(() => {\r\n if (hasData) {\r\n // Calculate the jitter from the times data.\r\n let jitter = [];\r\n for (var n = 0; n < tests.times[index].length - 1; ++n) {\r\n jitter.push(Math.trunc(Math.abs(tests.times[index][n] - tests.times[index][n + 1])));\r\n }\r\n\r\n // Get the latency and jitter averages.\r\n setLatency(Math.trunc(calculateAverage(tests.times[index])));\r\n setJitter(Math.trunc(calculateAverage(jitter)));\r\n }\r\n }, [tests, index, hasData]);\r\n\r\n /** Generate a tag id from the location.\r\n */\r\n const generateID = () => {\r\n const loc = targets[index].id;\r\n return `detail-${loc.toLowerCase()}`;\r\n };\r\n\r\n return (\r\n <>\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n More Details\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { About } from \"../common\";\r\n\r\nexport const AboutAverageLatency = (props) => {\r\n return (\r\n <>\r\n
\r\n \r\n Global average latency is the average of all latency measurements to all locations.\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { About } from \"../common\";\r\n\r\nexport const AboutMaximumLatency = (props) => {\r\n return (\r\n <>\r\n
\r\n \r\n Global maximum latency is the maximum (slowest) latency of all latency measurements to all locations.\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport { About } from \"../common\";\r\n\r\nexport const AboutMinimumLatency = (props) => {\r\n return (\r\n <>\r\n
\r\n \r\n Global minimum latency is the minimum (fastest) latency of all latency measurements to all locations.\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React, { useContext } from \"react\";\r\nimport { TestsContext } from \"../../contexts\";\r\nimport { ShadowBox, Stat } from \"../common\";\r\nimport { AboutMaximumLatency, AboutAverageLatency, AboutMinimumLatency } from \".\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\n\r\nexport const Stats = (props) => {\r\n const { className } = props;\r\n const { tests } = useContext(TestsContext);\r\n const { averageLatency, minimumLatency, maximumLatency } = tests;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n } />\r\n \r\n \r\n
\r\n \r\n } />\r\n \r\n \r\n
\r\n \r\n } />\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect } from \"react\";\r\nimport { TargetsContext } from \"../../contexts\";\r\nimport { Test } from \"./Test.js\";\r\nimport useAds from \"../../hooks/UseAds\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Stats } from \"./Stats\";\r\nimport { Button } from \"react-bootstrap\";\r\n\r\nexport const Tests = () => {\r\n const targets = useContext(TargetsContext);\r\n\r\n useAds();\r\n\r\n /** Function: Map test data to list.\r\n */\r\n const mapper = () => {\r\n var ar = targets.map((item, index) => (\r\n
\r\n \r\n {`This chart shows jitter over ${tests.times[targetIndex].length} latency measurements (pings) against a server in ${area}, ${country}`}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React, { useContext } from \"react\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { TargetsContext } from \"../../contexts\";\r\nimport { LatencyDetail } from \"./LatencyDetail\";\r\nimport { JitterDetail } from \"./JitterDetail\";\r\nimport { ShadowBox } from \"../common\";\r\nimport { LatencyChart, JitterChart, Location } from \"../common\";\r\nimport { GoToButton } from \"./GoToButton\";\r\nimport useAds from \"../../hooks/UseAds\";\r\nimport { AboutLatency } from \"./AboutLatency\";\r\nimport { AboutJitter } from \"./AboutJitter\";\r\nimport { AboutLatencyChart } from \"./AboutLatencyChart\";\r\nimport { AboutJitterChart } from \"./AboutJitterChart\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\nimport { Link } from \"react-router-dom\";\r\nimport start from \"../../assets/img/start.gif\";\r\n\r\nexport const Detail = () => {\r\n const { index } = useParams();\r\n let targets = useContext(TargetsContext);\r\n useAds();\r\n\r\n if (!targets || !targets[index]) return null;\r\n\r\n /** Render.\r\n *\r\n */\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n {/*
\r\n \r\n */}\r\n \r\n \r\n
\r\n \r\n
\r\n Latency\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n Jitter\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
Discover Your Latency on a Global Scale
\r\n
Only takes 30 seconds
\r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\nimport { calculateAverage, calculateMinimum, calculateMaximum } from \"../../utilities\";\r\nimport { TestsContext } from \"../../contexts\";\r\nimport { Stat } from \"../common\";\r\n\r\nconst initJitter = (tests) => {\r\n let j = [];\r\n for (var n = 0; n < tests.length - 1; ++n) {\r\n j.push(Math.trunc(Math.abs(tests[n] - tests[n + 1])));\r\n }\r\n return j;\r\n};\r\n\r\nexport const JitterDetail = (props) => {\r\n // const [data, setData] = useState([]);\r\n\r\n const [avg, setAverage] = useState(0);\r\n const [min, setMinimum] = useState(0);\r\n const [max, setMaximum] = useState(0);\r\n const { tests } = useContext(TestsContext);\r\n const { index } = props;\r\n\r\n /** Check if there is any data to display.\r\n */\r\n\r\n useEffect(() => {\r\n const hasData = (index) => {\r\n return tests !== null && Array.isArray(tests.times) && Array.isArray(tests.times[index]);\r\n };\r\n\r\n //let d = !props.data || !props.data//.length ? [] : props.data;\r\n\r\n if (!hasData(index)) return;\r\n\r\n let jitter = initJitter(tests?.times[index] ?? []);\r\n\r\n setAverage(() => Math.trunc(calculateAverage(jitter)));\r\n setMinimum(() => Math.trunc(calculateMinimum(jitter)));\r\n setMaximum(() => Math.trunc(calculateMaximum(jitter)));\r\n }, [tests, index]);\r\n\r\n return (\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\nimport { calculateAverage, calculateMinimum, calculateMaximum } from \"../../utilities\";\r\nimport { TestsContext } from \"../../contexts\";\r\nimport { Stat } from \"../common\";\r\n\r\nexport const LatencyDetail = (props) => {\r\n // const [data, setData] = useState([]);\r\n\r\n const [avg, setAverage] = useState(0);\r\n const [min, setMinimum] = useState(0);\r\n const [max, setMaximum] = useState(0);\r\n const { tests } = useContext(TestsContext);\r\n const { index } = props;\r\n\r\n /** Check if there is any data to display.\r\n */\r\n\r\n useEffect(() => {\r\n //let d = !props.data || !props.data//.length ? [] : props.data;\r\n\r\n const hasData = (index) => {\r\n return tests !== null && Array.isArray(tests.times) && Array.isArray(tests.times[index]);\r\n };\r\n\r\n if (!hasData(index)) return;\r\n\r\n let d = tests?.times[index] ?? [];\r\n\r\n setAverage(() => Math.trunc(calculateAverage(d)));\r\n setMinimum(() => Math.trunc(calculateMinimum(d)));\r\n setMaximum(() => Math.trunc(calculateMaximum(d)));\r\n }, [tests, index]);\r\n\r\n return (\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { ProgressBar } from \"react-bootstrap\";\r\nimport { ConfigurationContext } from \"../../contexts\";\r\n\r\n/** Testing progress.\r\n * Monitors the tests context and shows progress.\r\n */\r\nexport const Status = (props) => {\r\n // const { tests } = useContext(TestsContext);\r\n // const { testCount } = tests;\r\n // const { targetIndex } = props;\r\n const { localTestTime } = useContext(ConfigurationContext);\r\n const [startTime, setStartTime] = useState(Date.now());\r\n\r\n useEffect(() => {\r\n // Update the start time just once.\r\n setStartTime(Date.now());\r\n }, []);\r\n\r\n /** Calculate the percent of the tests done.\r\n */\r\n const percent = () => {\r\n const elapsedTime = Date.now() - startTime;\r\n // let p = Math.trunc((tests.times[targetIndex].length / 50) * 100);\r\n let p = Math.trunc((elapsedTime / localTestTime) * 100);\r\n return p > 95 ? 100 : p; // If the percent is over 95 just show 100.\r\n };\r\n\r\n /** Render.\r\n */\r\n\r\n return (\r\n <>\r\n \r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useCallback } from \"react\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { ConfigurationContext, TargetsContext, TestsContext, ApplicationStateContext } from \"../../contexts\";\r\nimport { LatencyDetail, JitterDetail } from \".\";\r\nimport { ShadowBox, LatencyChart, JitterChart, Location } from \"../common\";\r\nimport { toInt } from \"../../utilities\";\r\nimport { UseTesting } from \"../../hooks\";\r\nimport { Status } from \"./Status\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\n\r\n//import ReactGA from \"react-ga\";\r\n\r\n/**\r\n * DetailTesting component.\r\n *\r\n * Handles running the testing procedure and displaying the real time test results.\r\n */\r\nexport const DetailTesting = () => {\r\n const params = useParams(); // The URL parameters.\r\n const navigate = useNavigate();\r\n const { applicationState } = useContext(ApplicationStateContext);\r\n const targets = useContext(TargetsContext);\r\n const { dispatch } = useContext(TestsContext);\r\n const targetIndex = toInt(params.index);\r\n const { localTestTime, localTestLimit } = useContext(ConfigurationContext);\r\n\r\n /** Function: Handle the done testing event.\r\n */\r\n const onDoneTesting = useCallback(() => {\r\n // Go to the detail view.\r\n navigate(`/detail-test/${targetIndex}`);\r\n }, [targetIndex, navigate]);\r\n\r\n const { start } = UseTesting({ min: targetIndex, max: targetIndex }, localTestTime, localTestLimit, onDoneTesting);\r\n\r\n /** Function: Start the testing process.\r\n */\r\n const startTesting = useCallback(() => {\r\n dispatch({ type: \"reset\", index: targetIndex });\r\n start(onDoneTesting);\r\n }, [dispatch, targetIndex, start, onDoneTesting]);\r\n\r\n /** Effect: Reloads the page if ads are present.\r\n */\r\n useEffect(() => {\r\n // Reload the page if we're showing ads.\r\n if (applicationState.loadedAds) {\r\n window.location.reload(false);\r\n return;\r\n }\r\n }, [applicationState.loadedAds]);\r\n\r\n /** Effect: Start the testing process.\r\n */\r\n useEffect(() => {\r\n // Only start if there are no ads.\r\n if (!applicationState.loadedAds) {\r\n startTesting();\r\n }\r\n }, [applicationState.loadedAds, startTesting]);\r\n\r\n /** Function: Can or should we render this view?\r\n */\r\n const canRender = () => {\r\n // Check for no ads and that data is present.\r\n return !applicationState.loadedAds && targets && targets[targetIndex];\r\n };\r\n\r\n // Rendering\r\n\r\n if (!canRender()) {\r\n // Nothing to render.\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
Latency
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
Jitter
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
{\" \"}\r\n
\r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { Chart } from \"react-google-charts\";\r\nimport { TestsContext } from \"../../contexts\";\r\n\r\nexport const LatencyChart = (props) => {\r\n const { tests } = useContext(TestsContext);\r\n const [chartData, setData] = useState(null);\r\n\r\n useEffect(() => {\r\n if (tests.times && tests.times[props.index]) {\r\n // Set the chart data.\r\n let d = [[\"\", \"\"]];\r\n\r\n for (var n = 0; n < tests.times[props.index].length; ++n) {\r\n d.push([n + 1, tests.times[props.index][n]]);\r\n }\r\n setData(d);\r\n }\r\n }, [tests, props.index]);\r\n\r\n const hasData = () => {\r\n return tests.times && tests.times[props.index];\r\n };\r\n\r\n var options = {\r\n legend: \"none\",\r\n pointSize: 3,\r\n series: [{ color: \"grey\" }],\r\n hAxis: {\r\n textPosition: \"none\",\r\n gridlines: {\r\n count: 1,\r\n },\r\n },\r\n vAxis: {\r\n format: \"# ms\",\r\n minValue: 0,\r\n gridlines: {\r\n xcount: 1,\r\n },\r\n },\r\n };\r\n\r\n return (\r\n <>{hasData() && }\r\n );\r\n};\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { LatencyChart } from \"./LatencyChart\";\r\nimport { TestsContext } from \"../../contexts\";\r\nimport { Stat, Box } from \"../common\";\r\nimport { calculateAverage } from \"../../utilities\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\nimport { Location } from \"../common\";\r\n\r\nexport const Test = (props) => {\r\n let { tests } = useContext(TestsContext);\r\n const { index } = props;\r\n const [latency, setLatency] = useState(0);\r\n const [jitter, setJitter] = useState(0);\r\n const hasData = tests !== null && Array.isArray(tests.times) && Array.isArray(tests.times[index]);\r\n\r\n /** Initialize data and stats.\r\n */\r\n useEffect(() => {\r\n if (hasData) {\r\n // Calculate the jitter from the times data.\r\n let jitter = [];\r\n for (var n = 0; n < tests.times[index].length - 1; ++n) {\r\n jitter.push(Math.trunc(Math.abs(tests.times[index][n] - tests.times[index][n + 1])));\r\n }\r\n\r\n // Get the latency and jitter averages.\r\n setLatency(Math.trunc(calculateAverage(tests.times[index])));\r\n setJitter(Math.trunc(calculateAverage(jitter)));\r\n }\r\n }, [tests, index, hasData]);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useContext } from \"react\";\r\nimport { ProgressBar } from \"react-bootstrap\";\r\nimport { TestsContext } from \"../../contexts\";\r\n\r\n/** Testing progress.\r\n * Monitors the tests context and shows progress.\r\n */\r\nexport const Status = () => {\r\n const { tests } = useContext(TestsContext);\r\n const { testCount } = tests;\r\n\r\n /** Calculate the percent of the tests done.\r\n */\r\n const percent = () => {\r\n let p = Math.trunc((testCount / 40) * 100);\r\n return p > 100 ? 100 : p;\r\n };\r\n\r\n /** Render.\r\n */\r\n return (\r\n <>\r\n \r\n \r\n );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/as.aa142efd.mp4\";","export default __webpack_public_path__ + \"static/media/af.d0b9ebd4.mp4\";","export default __webpack_public_path__ + \"static/media/eu.bd299e10.mp4\";","export default __webpack_public_path__ + \"static/media/na.377a331c.mp4\";","export default __webpack_public_path__ + \"static/media/sa.1b5ddc90.mp4\";","export default __webpack_public_path__ + \"static/media/an.95df1c60.mp4\";","export default __webpack_public_path__ + \"static/media/oc.95df1c60.mp4\";","import React, { useContext } from \"react\";\r\nimport { LocationContext } from \"../../contexts\";\r\n//import beginTest from \"../../assets/img/begin-test.png\";\r\nimport asVideo from \"../../assets/video/as.mp4\";\r\nimport afVideo from \"../../assets/video/af.mp4\";\r\nimport euVideo from \"../../assets/video/eu.mp4\";\r\nimport naVideo from \"../../assets/video/na.mp4\";\r\nimport saVideo from \"../../assets/video/sa.mp4\";\r\nimport anVideo from \"../../assets/video/an.mp4\";\r\nimport ocVideo from \"../../assets/video/oc.mp4\";\r\n\r\nexport const Video = (props) => {\r\n const location = useContext(LocationContext);\r\n\r\n const video = () => {\r\n switch (location.continent.toUpperCase()) {\r\n case \"AF\":\r\n return afVideo;\r\n case \"AS\":\r\n return asVideo;\r\n case \"EU\":\r\n return euVideo;\r\n case \"NA\":\r\n return naVideo;\r\n case \"SA\":\r\n return saVideo;\r\n case \"OC\":\r\n return ocVideo;\r\n case \"AN\":\r\n return anVideo;\r\n default:\r\n return naVideo;\r\n }\r\n };\r\n\r\n /** Render.\r\n *\r\n */\r\n return (\r\n <>\r\n
\r\n {location?.continent && (\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n","import React, { useContext, useEffect, useState, useCallback } from \"react\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { Row, Col, Carousel, CarouselItem } from \"react-bootstrap\";\r\nimport { ConfigurationContext, TargetsContext, TestsContext, ApplicationStateContext } from \"../../contexts\";\r\nimport { UseTesting } from \"../../hooks\";\r\nimport { ShadowBox, Stat } from \"../common\";\r\nimport { Test } from \"./Test.js\";\r\nimport { Status } from \"./Status.js\";\r\nimport { Video } from \"./Video\";\r\n\r\n/**\r\n * GlobalTesting component.\r\n *\r\n * Handle the test running and display of real time results.\r\n */\r\nexport const GlobalTesting = () => {\r\n const targets = useContext(TargetsContext);\r\n const { applicationState } = useContext(ApplicationStateContext);\r\n const { tests, dispatch } = useContext(TestsContext);\r\n const [activeSlide, setActiveSlide] = useState(0);\r\n const { averageLatency, minimumLatency, maximumLatency } = tests;\r\n const navigate = useNavigate();\r\n const { globalTestTime, globalTestLimit } = useContext(ConfigurationContext);\r\n\r\n /** Function: Navigate to the results view.\r\n */\r\n const onDone = useCallback(() => {\r\n // Navigate to results view after a short time.\r\n setTimeout(() => {\r\n navigate(\"/global-tests\");\r\n }, 3000);\r\n }, [navigate]);\r\n\r\n const { start, count } = UseTesting({ min: 0, max: targets.length - 1 }, globalTestTime, globalTestLimit, onDone);\r\n\r\n /** Effect: Set the active slide whenever the count changes.\r\n */\r\n useEffect(() => {\r\n setActiveSlide(count);\r\n }, [count]);\r\n\r\n /** Effect: Reload the page if ads are showing.\r\n */\r\n useEffect(() => {\r\n // Reload the page if we're showing ads.\r\n if (applicationState.loadedAds) {\r\n window.location.reload(false);\r\n return;\r\n }\r\n });\r\n\r\n /** Effect: Start the testing.\r\n */\r\n useEffect(() => {\r\n // Check for ads.\r\n if (applicationState.loadedAds) {\r\n return;\r\n }\r\n\r\n const onStart = () => {\r\n // Reset the tests data and stats.\r\n dispatch({ type: \"reset\" });\r\n\r\n // Start the testing in 3 seconds to match the video intro.\r\n setTimeout(() => {\r\n start();\r\n }, 3000);\r\n };\r\n\r\n onStart();\r\n }, [applicationState.loadedAds, dispatch, start]);\r\n\r\n /** Function: Map all the test data to the carousel.\r\n */\r\n const mapper = () => {\r\n var ar = targets.map((item, index) => (\r\n \r\n \r\n \r\n ));\r\n\r\n return ar; //.reverse();\r\n };\r\n\r\n // Rendering.\r\n\r\n // Don't show anything until there are no ads via a page reload.\r\n if (applicationState.loadedAds) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n
\r\n \r\n {mapper()}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\nimport \"./App.scss\";\r\nimport App from \"./App\";\r\nimport reportWebVitals from \"./reportWebVitals\";\r\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\r\nimport { Home } from \"./components/home/Home\";\r\nimport { Tests } from \"./components/global-tests/Tests\";\r\nimport { Detail } from \"./components/detail-test/Detail\";\r\nimport { DetailTesting } from \"./components/detail-testing/DetailTesting\";\r\nimport { createBrowserHistory } from \"history\";\r\nimport TagManager from \"react-gtm-module\";\r\n\r\n//import \"bootstrap/dist/css/bootstrap.css\";\r\nimport \"bootstrap-icons/font/bootstrap-icons.css\";\r\n\r\nimport { GlobalTesting } from \"./components/global-testing/GlobalTesting\";\r\n\r\n//import ReactGA from \"react-ga\";\r\n// Google analytics and tag manager initializations.\r\n//ReactGA.initialize(\"UA-2932866-3\");\r\n\r\n// TagManager.initialize({\r\n// gtmId: \"GTM-W3XGXX2\",\r\n// });\r\n\r\nconst baseUrl = document.getElementsByTagName(\"base\")[0].getAttribute(\"href\");\r\n\r\nexport const history = createBrowserHistory({\r\n basename: process.env.PUBLIC_URL,\r\n});\r\n\r\nTagManager.initialize({\r\n gtmId: \"GTM-W3XGXX2\",\r\n});\r\n\r\nReactDOM.render(\r\n \r\n \r\n \r\n }>\r\n }>\r\n }>\r\n }>\r\n }>\r\n }>\r\n \r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n\r\nreportWebVitals();\r\n","/** \r\n *\r\n * Ping a URL and return the time taken (latency).\r\n *\r\n */\r\nconst pingAsync = async (url) => {\r\n\r\n let start = performance.now();\r\n\r\n try {\r\n let response = await fetch(\"https://\" + url + `/test.dat?cb=${Date.now()}`, {\r\n method: \"GET\",\r\n// mode: \"no-cors\",\r\n headers: {\r\n// Accept: \"binary/octet-stream,text/plain\",\r\n Accept: \"text/plain\",\r\n },\r\n });\r\n\r\n await response.text(); // Read response to get the actual time.\r\n \r\n let end = performance.now();\r\n\r\n if (response.ok) {\r\n return end - start;\r\n }\r\n } catch (error) {\r\n // TODO: Write to log.\r\n // console.log(error.message);\r\n }\r\n\r\n // Error.\r\n return 0;\r\n};\r\n\r\n/** Test latency by pinging a server multiple times.\r\n *\r\n * target -> URL of server to ping.\r\n * testCount -> maximum pings to perform.\r\n * testTime -> maximum time (ms) to perform pings.\r\n *\r\n * Returns an array of latencies.\r\n */\r\nexport const testLatencyAsync = async (\r\n target,\r\n testCount,\r\n testTime,\r\n setResults,\r\n onDone\r\n) => {\r\n var latencies = [];\r\n var stopTime = Date.now() + testTime; // Test stop time in ms.\r\n\r\n // Do the first and throw it away because it may include a DNS lookup.\r\n await pingAsync(target);\r\n\r\n // console.log(`max time: ${testTime}`);\r\n // console.log(`max tests: ${testCount}`);\r\n\r\n for (var n = 0; n < testCount && Date.now() < stopTime; ++n) {\r\n let latency = await pingAsync(target);\r\n if (latency) {\r\n // Latency from the ping is a two way timing with processing on the server so adjust it accordingly.\r\n latency = (latency - 10) / 2;\r\n if (latency <= 0) latency = 10; // Just in case. This really shouldn't ever happen.\r\n latencies.push(latency);\r\n setResults(latency);\r\n }\r\n }\r\n\r\n // console.log(`out of here`);\r\n\r\n if (onDone) {\r\n // Call the done handler.\r\n onDone();\r\n }\r\n\r\n return latencies;\r\n};\r\n","/** Calculate the average of an array of numbers.\r\n *\r\n */\r\nexport const calculateAverage = (stats) => {\r\n if (!stats || !stats.length) {\r\n return 0;\r\n }\r\n\r\n let sum = 0;\r\n let count = 0;\r\n for (var n = 0; n < stats.length; ++n) {\r\n if (stats[n]) {\r\n sum += stats[n];\r\n count++;\r\n }\r\n }\r\n\r\n return count !== 0 ? sum / count : 0;\r\n};\r\n\r\n/** Find the lowest amount in an array of numbers.\r\n *\r\n */\r\nexport const calculateMinimum = (stats) => {\r\n if (!stats || !stats.length) {\r\n return 0;\r\n }\r\n\r\n let min = stats[0];\r\n for (var n = 0; n < stats.length; ++n) {\r\n if (stats[n] < min) min = stats[n];\r\n }\r\n return min;\r\n};\r\n\r\n/** Find the maximum amount in an array of numbers.\r\n *\r\n */\r\nexport const calculateMaximum = (stats) => {\r\n if (!stats || !stats.length) {\r\n return 0;\r\n }\r\n\r\n let max = stats[0];\r\n for (var n = 0; n < stats.length; ++n) {\r\n if (stats[n] > max) max = stats[n];\r\n }\r\n return max;\r\n};\r\n","/** Set a session storage item.\r\n *\r\n */\r\nexport const setStorage = (key, value) => {\r\n if (!key || !value) {\r\n return;\r\n }\r\n\r\n if (typeof value === \"object\") {\r\n value = JSON.stringify(value);\r\n }\r\n localStorage.setItem(key, value);\r\n};\r\n\r\n/** Get a session storage item.\r\n *\r\n */\r\nexport const getStorage = (key) => {\r\n var value = localStorage.getItem(key);\r\n\r\n if (!value) {\r\n return;\r\n }\r\n\r\n // assume it is an object that has been stringified\r\n if (value[0] === \"{\") {\r\n value = JSON.parse(value);\r\n }\r\n\r\n return value;\r\n};\r\n","export const toInt = (s) => {\r\n const parsed = parseInt(s);\r\n if (isNaN(parsed)) {\r\n return null;\r\n }\r\n return parsed;\r\n};\r\n"],"sourceRoot":""}
\r\n 
\r\n