Latency threshold, LBRY/Odysee -> LBRY

Closes https://github.com/libredirect/libredirect/pull/405

src/assets/javascripts/general.js

@@ -32,6 +32,7 @@ async function initDefaults() {
 				firstPartyIsolate: false,
 				protocol: "normal",
 				protocolFallback: true,
+				latencyThreshold: 1000
 			},
 			() => resolve()
 		)

src/assets/javascripts/utils.js

@@ -247,34 +247,65 @@ async function processDefaultCustomInstances(target, name, protocol, document) {
 	})
 }
 
-async function ping(href) {
+function ping(href) {
 	return new Promise(async resolve => {
+		let average = 0
+		let time
+		for (let i = 0; i < 3; i++) {
+			time = await pingOnce(href)
+			if (i == 0) continue
+			if (time >= 5000) {
+				resolve(time)
+				return
+			}
+			average += time
+		}
+		average = parseInt(average / 3)
+		resolve(average)
+	})
+}
+
+function pingOnce(href) {
+	return new Promise(async resolve => {
+		let started
 		let http = new XMLHttpRequest()
-		http.open("GET", `${href}?_=${new Date().getTime()}`, /*async*/ true)
 		http.timeout = 5000
-		let started = new Date().getTime()
+		http.ontimeout = () => resolve(5000)
+		http.onerror = () => resolve()
 		http.onreadystatechange = () => {
 			if (http.readyState == 2) {
 				if (http.status == 200) {
 					let ended = new Date().getTime()
 					http.abort()
 					resolve(ended - started)
-				} else resolve(5000 + http.status)
+				} else {
+					resolve(5000 + http.status)
 				}
 			}
-		http.ontimeout = () => resolve(5000)
+
-		http.onerror = () => resolve()
+		}
-		try {
+		http.open("GET", `${href}?_=${new Date().getTime()}`, true)
+		started = new Date().getTime()
 		http.send(null)
-		} catch (exception) {
-			resolve()
-		}
 	})
 }
  
-async function testLatency(element, instances) {
+
+async function testLatency(element, instances, frontend) {
 	return new Promise(async resolve => {
 		let myList = {}
+		let latencyThreshold
+		let redirectsChecks = []
+		browser.storage.local.get(
+			[
+				"latencyThreshold",
+				`${frontend}NormalRedirectsChecks`
+			],
+			r => {
+				latencyThreshold = r.latencyThreshold
+				redirectsChecks = r[`${frontend}NormalRedirectsChecks`]
+			}
+		)
 		for (const href of instances)
 			await ping(href).then(time => {
 				if (time) {
@@ -284,6 +315,12 @@ async function testLatency(element, instances) {
 					else if (time <= 2000) color = "orange"
 					else color = "red"
 
+					if (time > latencyThreshold) {
+						redirectsChecks.splice(redirectsChecks.indexOf(href), 1)
+					}
+
+					browser.storage.local.set({ [`${frontend}NormalRedirectsChecks`]: redirectsChecks })
+
 					let text
 					if (time == 5000) text = "5000ms+"
 					else if (time > 5000) text = `ERROR: ${time - 5000}`
@@ -487,7 +524,7 @@ function latency(name, frontend, document, location) {
 			let redirects = r[key]
 			const oldHtml = latencyLabel.innerHTML
 			latencyLabel.innerHTML = "..."
-			testLatency(latencyLabel, redirects[frontend].normal).then(r => {
+			testLatency(latencyLabel, redirects[frontend].normal, frontend).then(r => {
 				browser.storage.local.set({ [`${frontend}Latency`]: r })
 				latencyLabel.innerHTML = oldHtml
 				processDefaultCustomInstances(name, frontend, "normal", document)

src/pages/options/index.html

@@ -21,7 +21,7 @@
           <div class="title"> <img src="../../../assets/images/instagram-icon.png"><a href="#instagram" data-localise="__MSG_instagram__">Instagram</a></div>
           <div class="title"> <img src="../../../assets/images/tiktok-icon.png"><a href="#tiktok" data-localise="__MSG_tiktok__">TikTok</a></div>
           <div class="title"> <img src="../../../assets/images/reddit-icon.png"><a href="#reddit" data-localise="__MSG_reddit__">Reddit</a></div>
-          <div class="title"> <img src="../../../assets/images/imgur-icon.png"><a href="#imgur" data-localise="__MSG_imgur__">Imgur</a></div>
+          <div class="title"> <img src="../../../assets/images/imgur.png"><a href="#imgur" data-localise="__MSG_imgur__">Imgur</a></div>
           <div class="title"> <img src="../../../assets/images/wikipedia-icon.svg"><a href="#wikipedia" data-localise="__MSG_wikipedia__">Wikipedia</a></div>
           <div class="title"> 
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1770 1000" fill="currentColor">
@@ -34,7 +34,7 @@
           <div class="title"><img src="../../../assets/images/imdb.svg"><a href="#imdb" data-localise="__MSG_imdb__">IMDb</a></div>
           <div class="title"><img src="../../../assets/images/reuters.svg"><a href="#reuters" data-localise="__MSG_reuters__">Reuters</a></div>
           <div class="title"> <img src="../../../assets/images/peertube-icon.svg"><a href="#peertube" data-localise="__MSG_peertube__">PeerTube</a></div>
-          <div class="title"> <img src="../../../assets/images/lbry-icon.png"><a href="#lbry" data-localise="__MSG_lbry__">LBRY/Odysee</a></div>
+          <div class="title"> <img src="../../../assets/images/lbry-icon.png"><a href="#lbry" data-localise="__MSG_lbry__">LBRY</a></div>
           <div class="title"> 
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
@@ -94,6 +94,13 @@
           <h4 data-localise="__MSG_autoRedirect__"></h4>
           <input id="auto-redirect" type="checkbox">
         </div>
+        <form>
+          <div class="some-block option-block">
+            <h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4>
+            <output id="latency-output" for="latencyInput" name="latencyOutput"></output>
+            <input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50">
+          </div>
+        </form>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_exceptions__"></h4>
         </div>
@@ -173,7 +180,7 @@
             <input id="tiktok" type="checkbox">
           </div>
           <div> 
-            <div> <img src="../../../assets/images/imgur-icon.png">
+            <div> <img src="../../../assets/images/imgur.png">
               <x data-localise="__MSG_imgur__">Imgur</x>
             </div>
             <input id="imgur" type="checkbox">
@@ -254,7 +261,7 @@
           </div>
           <div> 
             <div> <img src="../../../assets/images/lbry-icon.png">
-              <x data-localise="__MSG_lbry__">LBRY/Odysee</x>
+              <x data-localise="__MSG_lbry__">LBRY</x>
             </div>
             <input id="lbry" type="checkbox">
           </div>

src/pages/options/widgets/general.pug

@@ -31,6 +31,12 @@ section#general_page.option-block
         h4(data-localise="__MSG_autoRedirect__")
         input#auto-redirect(type="checkbox")
 
+    form
+        .some-block.option-block
+            h4(data-localise="__MSG_latencyThreshold") Latency Threshold
+            output#latency-output(for="latencyInput" name="latencyOutput")
+            input#latency-input(type="range" min="50" max="5000" value="1000" name="latencyInput" step="50")
+
     .some-block.option-block
         h4(data-localise="__MSG_exceptions__")
 
@@ -117,7 +123,7 @@ section#general_page.option-block
 
         div 
             div 
-                img(src="../../../assets/images/imgur-icon.png")
+                img(src="../../../assets/images/imgur.png")
                 x(data-localise="__MSG_imgur__") Imgur
             input#imgur(type="checkbox")
 
@@ -190,7 +196,7 @@ section#general_page.option-block
         div 
             div 
                 img(src="../../../assets/images/lbry-icon.png")
-                x(data-localise="__MSG_lbry__") LBRY/Odysee
+                x(data-localise="__MSG_lbry__") LBRY
             input#lbry(type="checkbox")
 
         div 

src/pages/popup/popup.html

@@ -28,7 +28,7 @@
           <h4 data-localise="__MSG_tiktok__">TikTok</h4></a>
         <input class="disable-tiktok" type="checkbox"/>
       </div>
-      <div class="imgur some-block"><a class="title" href="https://imgur.com"><img src="../../assets/images/imgur-icon.png"/>
+      <div class="imgur some-block"><a class="title" href="https://imgur.com"><img src="../../assets/images/imgur.png"/>
           <h4 data-localise="__MSG_imgur__">Imgur</h4></a>
         <input class="disable-imgur" type="checkbox"/>
       </div>
@@ -122,7 +122,7 @@
           <h4 data-localise="__MSG_tiktok__">TikTok</h4></a>
         <input class="disable-tiktok" type="checkbox"/>
       </div>
-      <div class="imgur some-block"><a class="title" href="https://imgur.com"><img src="../../assets/images/imgur-icon.png"/>
+      <div class="imgur some-block"><a class="title" href="https://imgur.com"><img src="../../assets/images/imgur.png"/>
           <h4 data-localise="__MSG_imgur__">Imgur</h4></a>
         <input class="disable-imgur" type="checkbox"/>
       </div>

src/pages/popup/popup.pug

@@ -33,7 +33,7 @@ mixin services
 
     .imgur.some-block
         a.title(href="https://imgur.com")
-            img(src="../../assets/images/imgur-icon.png")
+            img(src="../../assets/images/imgur.png")
             h4(data-localise="__MSG_imgur__") Imgur
         input.disable-imgur(type="checkbox")