Playlists, Play Next, Code Refactor

src/scripts/colors.js

@@ -0,0 +1,16 @@
+const c = [
+	"linear-gradient(45deg, #88c0d0, #5e81ac)",
+	"linear-gradient(45deg, #5e81ac, #b48ead)",
+	"linear-gradient(45deg, #a3be8c, #88c0d0)",
+	"linear-gradient(45deg, #ebcb8b, #a3be8c)",
+	"linear-gradient(45deg, #d08770, #bf616a)"
+];
+
+export function useColors() {
+	return c
+}
+
+export function useRand() {
+	const i = Math.floor(Math.random() * c.length);
+	return c[i]	
+}

src/scripts/db.js

@@ -0,0 +1,98 @@
+export function useUpdatePlaylist(key, obj, cb = () => null) {
+	
+	if (window.db && key) {
+		
+		const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
+		req = store.get(key);
+
+		req.onerror = (e) => {
+			console.log('Error!!', e)
+		}
+
+		req.onsuccess = e => {
+			const itm = e.target.result;
+
+			if (itm) {
+				itm.urls.push(obj)
+				store.put(itm)
+				cb(true)
+			}
+		}
+
+	} else alert('No indexedDB Created')
+
+}
+
+export function useCreatePlaylist(key, obj, cb = () => null ) {
+	if (window.db && key && obj) {
+		
+		const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
+		req = store.get(key);
+
+		req.onerror = (e) => {
+			console.log('Error!!', e)
+		}
+
+		req.onsuccess = (e) => {
+			const res = e.target.result;
+
+			if (!res) {
+
+				store.add({
+					name: key, urls: obj
+				});
+
+				cb(res);
+
+			} else {
+				console.log(e.target.result);
+				alert(`Error: Playlist with name ${key} exists`)
+			}
+
+		}
+	} else alert('No indexedDB Created')
+}
+
+export function useGetPlaylist(key, cb = () => null ) {
+
+	if (window.db && key) {
+		
+		const store = window.db.transaction(['playlist']).objectStore('playlist'),
+		req = store.get(key);
+
+		req.onerror = (e) => {
+			console.log('Error!!', e)
+		}
+
+		req.onsuccess = e => {
+			const res = e.target.result;
+
+			if (res) {
+				cb(res)
+			}
+		}
+
+	} else alert('No indexedDB Created')
+}
+
+export function useListPlaylists(cb = () => null) {
+	if (window.db) {
+
+		let pls = [];
+
+		const store = window.db.transaction(['playlist']).objectStore('playlist'),
+		cursor = store.openCursor();
+
+		cursor.onsuccess = (e) => {
+			const pl = e.target.result;
+
+			if (pl) {
+				pls.push(pl.value)
+				pl.continue()
+			} else {
+				cb(pls)
+			}
+
+		}
+	}
+}

src/scripts/util.js

@@ -0,0 +1,33 @@
+export function usePrefs(key) {
+	if (localStorage) {
+		if (localStorage.get(key)) return true
+		else return false
+	} else return false
+}
+
+export function useLazyLoad() {
+  let lazyElems;
+
+  if ('IntersectionObserver' in window) {
+    lazyElems = document.querySelectorAll('.bg-img:not(.lazy)');
+
+    let imgObs = new IntersectionObserver((elems, obs) => {
+      elems.forEach((elem) => {
+        setTimeout(() => {
+          if (elem.isIntersecting) {
+            let ele = elem.target;
+
+            ele.classList.add('lazy');
+            imgObs.unobserve(ele);
+          }
+        }, 20);
+      });
+    });
+
+    lazyElems.forEach((img) => {
+      imgObs.observe(img);
+    });
+  } else {
+    console.log('Failed');
+  }
+}