Merge pull request #89 from DeepDoge/1.7.6

Clear cache button added and caching improved

src/common/components/ButtonRadio.sass

@@ -5,6 +5,10 @@
   justify-content: center
   flex-wrap: wrap
   gap: .25em
+  cursor: pointer
+
+  *
+    cursor: pointer
 
   .radio-button
     @extend .button

src/common/yt/urlCache.ts

@@ -9,20 +9,44 @@ if (typeof self.indexedDB !== 'undefined') {
     // Delete Expired
     openRequest.addEventListener('success', () => {
         db = openRequest.result
-        const transaction = db.transaction("store", "readwrite")
+        clearExpired()
-        const range = IDBKeyRange.upperBound(new Date())
-
-        const expireAtCursorRequest = transaction.objectStore("store").index("expireAt").openCursor(range)
-        expireAtCursorRequest.addEventListener('success', () => {
-            const expireCursor = expireAtCursorRequest.result
-            if (!expireCursor) return
-            expireCursor.delete()
-            expireCursor.continue()
-        })
     })
 }
 else console.warn(`IndexedDB not supported`)
 
+async function clearExpired() {
+    return new Promise<void>((resolve, reject) => {
+        if (!db) throw new Error(`IDBDatabase not defined.`)
+        const transaction = db.transaction("store", "readwrite")
+        const range = IDBKeyRange.upperBound(new Date())
+
+        const expireAtCursorRequest = transaction.objectStore("store").index("expireAt").openCursor(range)
+        expireAtCursorRequest.addEventListener('error', () => reject(expireAtCursorRequest.error))
+        expireAtCursorRequest.addEventListener('success', () => {
+            try {
+                const expireCursor = expireAtCursorRequest.result
+                if (!expireCursor) return
+                expireCursor.delete()
+                expireCursor.continue()
+                resolve()
+            }
+            catch (ex) {
+                reject(ex)
+            }
+        })
+    })
+}
+
+async function clearAll()
+{
+    return await new Promise<void>((resolve, reject) => {
+        const store = db?.transaction("store", "readwrite").objectStore("store")
+        if (!store) return resolve()
+        const request = store.clear()
+        request.addEventListener('success', () => resolve())
+        request.addEventListener('error', () => reject(request.error))
+    })
+}
 
 async function put(url: string | null, id: string): Promise<void> {
     return await new Promise((resolve, reject) => {
@@ -34,15 +58,26 @@ async function put(url: string | null, id: string): Promise<void> {
     })
 }
 
-async function get(id: string): Promise<string | null> {
+// string means there is cache of lbrypathname
-    return (await new Promise((resolve, reject) => {
+// null means there is cache of that id has no lbrypathname
+// undefined means there is no cache
+async function get(id: string): Promise<string | null | undefined> {
+    const response = (await new Promise((resolve, reject) => {
         const store = db?.transaction("store", "readonly").objectStore("store")
-        if (!store) return resolve(null)
+        if (!store) return reject(`Can't find object store.`)
+
         const request = store.get(id)
         request.addEventListener('success', () => resolve(request.result))
         request.addEventListener('error', () => reject(request.error))
-    }) as any)?.value
+    }) as { value: string | null, expireAt: Date } | undefined)
+
+    if (response === undefined) return undefined
+    if (response.expireAt <= new Date()) {
+        await clearExpired()
+        return undefined
+    }
+    return response.value
 }
 
-export const LbryPathnameCache = { put, get }
+export const LbryPathnameCache = { put, get, clearAll }
 

src/popup/popup.sass

@@ -11,3 +11,6 @@
     display: grid
     grid-auto-flow: row
     gap: 1em
+
+button
+    cursor: pointer

src/popup/popup.tsx

@@ -1,7 +1,9 @@
 import { h, render } from 'preact'
+import { useState } from 'preact/hooks'
 import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
 import { ExtensionSettings, getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings'
 import { useLbrySettings } from '../common/useSettings'
+import { LbryPathnameCache } from '../common/yt/urlCache'
 import './popup.sass'
 
 /** Utilty to set a setting in the browser */
@@ -16,6 +18,7 @@ const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntirie
 
 function WatchOnLbryPopup() {
   const { redirect, targetPlatform, urlResolver } = useLbrySettings()
+  let [clearingCache, updateClearingCache] = useState(() => false)
 
   return <div className='container'>
     <section>
@@ -33,6 +36,14 @@ function WatchOnLbryPopup() {
       <ButtonRadio value={urlResolver} options={ytUrlResolverOptions}
         onChange={(urlResolver: YTUrlResolverName) => setSetting('urlResolver', urlResolver)} />
     </section>
+    <section>
+      <a onClick={async () => {
+        await LbryPathnameCache.clearAll()
+        alert('Cleared Cache.')
+      }}>
+        <button type='button' className='btn1 button is-primary'>{clearingCache ? 'Clearing Cache...' : 'Clear Cache'}</button>
+      </a>
+    </section>
     <section>
       <label className='radio-label'>Other useful tools:</label>
       <a href='/tools/YTtoLBRY.html' target='_blank'>