From df5806be6ba760c3bd2d3a6baaabe5a678bc05fc Mon Sep 17 00:00:00 2001 From: n-ce Date: Wed, 1 May 2024 16:45:20 +0530 Subject: [PATCH 01/77] testing netlify functions 1 --- netlify/functions/oembed.mjs | 4 ++++ src/stylesheets/style.css | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 netlify/functions/oembed.mjs diff --git a/netlify/functions/oembed.mjs b/netlify/functions/oembed.mjs new file mode 100644 index 00000000..953495c3 --- /dev/null +++ b/netlify/functions/oembed.mjs @@ -0,0 +1,4 @@ +export default async (req, context) => { + return new Response("Hello, world!"); +}; + diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css index 9a3bb1ae..90f4d8a5 100644 --- a/src/stylesheets/style.css +++ b/src/stylesheets/style.css @@ -18,6 +18,7 @@ --roundness: 2vmin; --defaultBg: var(--text); --defaultText: var(--bg); + --pageTransitionEffect: translateX(100%); } @font-face { @@ -57,10 +58,11 @@ section { animation: appear 0.2s cubic-bezier(0.19, 1, 0.22, 1); } + @keyframes appear { from { opacity: 0; - transform: translateX(100%); + transform: var(--pageTransitionEffect); } } @@ -111,6 +113,7 @@ section.view { section { height: calc(80% - 2dvh); margin-bottom: 2dvh; + --pageTransitionEffect: translateY(100%); } } From cfb0b04651c5a8e22d5ab8e06d53e52cba32632c Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 20:21:02 +0530 Subject: [PATCH 02/77] add link tag --- index.html | 4 ++++ netlify/functions/oembed.mjs | 2 +- package.json | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 24d02d35..379d11fb 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,10 @@ + + + diff --git a/netlify/functions/oembed.mjs b/netlify/functions/oembed.mjs index 953495c3..cc383796 100644 --- a/netlify/functions/oembed.mjs +++ b/netlify/functions/oembed.mjs @@ -1,4 +1,4 @@ export default async (req, context) => { - return new Response("Hello, world!"); + return new Response(JSON.stringify(req)); }; diff --git a/package.json b/package.json index f61c3ae5..8ea288f2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ytify", - "version": "6.9.2", + "version": "6.9.4", "type": "module", "scripts": { "dev": "vite", From 3b84d5d319a3e5f9270a287d9a35f1dea9fcd4c5 Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 20:39:36 +0530 Subject: [PATCH 03/77] oembed --- index.html | 2 +- netlify/functions/oembed.mjs | 4 ---- netlify/functions/oembed.mts | 6 ++++++ package.json | 3 ++- 4 files changed, 9 insertions(+), 6 deletions(-) delete mode 100644 netlify/functions/oembed.mjs create mode 100644 netlify/functions/oembed.mts diff --git a/index.html b/index.html index 379d11fb..938aedf7 100644 --- a/index.html +++ b/index.html @@ -410,4 +410,4 @@

playlist or channel items show here

- \ No newline at end of file + diff --git a/netlify/functions/oembed.mjs b/netlify/functions/oembed.mjs deleted file mode 100644 index cc383796..00000000 --- a/netlify/functions/oembed.mjs +++ /dev/null @@ -1,4 +0,0 @@ -export default async (req, context) => { - return new Response(JSON.stringify(req)); -}; - diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts new file mode 100644 index 00000000..eb4c7b63 --- /dev/null +++ b/netlify/functions/oembed.mts @@ -0,0 +1,6 @@ +import type { Context } from '@netlify/functions'; + +export default async (req: Request, context: Context) => { + return new Response(JSON.stringify(context.params)); +}; + diff --git a/package.json b/package.json index 8ea288f2..fcaa41e7 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "lit": "^3.1.3" }, "devDependencies": { + "@netlify/functions": "^2.6.0", "autoprefixer": "^10.4.19", "eruda": "^3.0.1", "typescript": "^5.4.5", @@ -22,4 +23,4 @@ "browserslist": [ "defaults" ] -} \ No newline at end of file +} From bbbd21ff93f5d5afcf94b613a6b004051d1aa1ed Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 20:47:11 +0530 Subject: [PATCH 04/77] context-site-url --- netlify/functions/oembed.mts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index eb4c7b63..4b6e0af5 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -1,6 +1,8 @@ import type { Context } from '@netlify/functions'; export default async (req: Request, context: Context) => { - return new Response(JSON.stringify(context.params)); + return new Response( + JSON.stringify(context.site.url) + ); }; From 41df38c4ba526c1dda5f9095d351fd80da1866a9 Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 21:20:44 +0530 Subject: [PATCH 05/77] set noembed --- netlify/functions/oembed.mts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 4b6e0af5..5209473b 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -1,8 +1,16 @@ import type { Context } from '@netlify/functions'; +const api = 'http://noembed.com/embed?url='; export default async (req: Request, context: Context) => { + + const main_URL = context.site.url as string; + const param = (new URL(main_URL)).searchParams.get('s') || 'aQvGIIdgFDM'; + const data = await fetch(api + param) + .then(res => res.json()); + + return new Response( - JSON.stringify(context.site.url) + JSON.stringify(data) ); }; From 94f4bdee629cb1efad40eb57e68b943aa3b6c37a Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 21:42:24 +0530 Subject: [PATCH 06/77] update noembed api --- netlify/functions/oembed.mts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 5209473b..1244ff5a 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -1,5 +1,5 @@ import type { Context } from '@netlify/functions'; -const api = 'http://noembed.com/embed?url='; +const api = 'http://noembed.com/embed?url=https://youtube.com/watch?v='; export default async (req: Request, context: Context) => { From 7a5ab47e260fb6034e4bd9a866f0cc116909bdd6 Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 22:34:14 +0530 Subject: [PATCH 07/77] context params --- index.html | 6 +++--- netlify/functions/oembed.mts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 938aedf7..9d3bfa82 100644 --- a/index.html +++ b/index.html @@ -16,12 +16,12 @@ - + - + playlist or channel items show here - + \ No newline at end of file diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 1244ff5a..0426115e 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -10,7 +10,7 @@ export default async (req: Request, context: Context) => { return new Response( - JSON.stringify(data) + JSON.stringify(context.params) ); }; From 0aba04ad01e2f7d97bb7daa05eb63b0f526c6b30 Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 22:49:47 +0530 Subject: [PATCH 08/77] use req url --- netlify/functions/oembed.mts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 0426115e..7eede04e 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -3,14 +3,13 @@ const api = 'http://noembed.com/embed?url=https://youtube.com/watch?v='; export default async (req: Request, context: Context) => { - const main_URL = context.site.url as string; - const param = (new URL(main_URL)).searchParams.get('s') || 'aQvGIIdgFDM'; + const param = (new URL(req.url)).searchParams.get('s') || 'aQvGIIdgFDM'; const data = await fetch(api + param) .then(res => res.json()); return new Response( - JSON.stringify(context.params) + JSON.stringify(data) ); }; From 73114650c874dbd9b73aa13534d6c735a1a618ca Mon Sep 17 00:00:00 2001 From: n-ce Date: Fri, 3 May 2024 22:59:06 +0530 Subject: [PATCH 09/77] return json --- netlify/functions/oembed.mts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 7eede04e..2488fb8d 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -3,13 +3,9 @@ const api = 'http://noembed.com/embed?url=https://youtube.com/watch?v='; export default async (req: Request, context: Context) => { - const param = (new URL(req.url)).searchParams.get('s') || 'aQvGIIdgFDM'; - const data = await fetch(api + param) - .then(res => res.json()); + const param = new URL(req.url).searchParams.get('s') || 'aQvGIIdgFDM'; + const data = await fetch(api + param).then(res => res.json()); - - return new Response( - JSON.stringify(data) - ); + return Response.json(data); }; From ea6283415d62223a0c04394c4b26dae4052141e7 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 11:40:17 +0530 Subject: [PATCH 10/77] test opengraph edge function --- index.html | 4 ++-- netlify.toml | 3 +++ netlify/functions/oembed.mts | 3 +++ opengraph.ts | 37 ++++++++++++++++++++++++++++++++++++ package.json | 1 + 5 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 netlify.toml create mode 100644 opengraph.ts diff --git a/index.html b/index.html index 9d3bfa82..f2c704cd 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - + @@ -410,4 +410,4 @@

playlist or channel items show here

- \ No newline at end of file + diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..27e30ce9 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,3 @@ +[[edge_functions]] + function = "opengraph" + path = "/*" diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index 2488fb8d..e1675dea 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -9,3 +9,6 @@ export default async (req: Request, context: Context) => { return Response.json(data); }; +export const config: Config = { + path: "/*", +}; diff --git a/opengraph.ts b/opengraph.ts new file mode 100644 index 00000000..0c04a22d --- /dev/null +++ b/opengraph.ts @@ -0,0 +1,37 @@ +import { Context, Config } from "@netlify/edge-functions"; + +export default async (request: Request, context: Context) => { + + // Just return what was requested without transforming it, + // unless we fnd the query parameter for this demo + const url = new URL(request.url); + if (url.searchParams.has('s')) + return; + + + // Get the page content + const response = await context.next(); + const page = await response.text(); + const id = url.searchParams.get('s'); + + + + const standardOG = ` + + + + `; + const newOG = ` + + + + ` + + + const updatedPage = page.replace(standardOG, newOG); + return new Response(updatedPage, response); +}; + +export const config: Config = { + path: "/*", +}; diff --git a/package.json b/package.json index fcaa41e7..87d382a8 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "lit": "^3.1.3" }, "devDependencies": { + "@netlify/edge-functions": "^2.6.1", "@netlify/functions": "^2.6.0", "autoprefixer": "^10.4.19", "eruda": "^3.0.1", From 115f89861df91ef434f06e97a08d863c9fe7e8a8 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 11:46:30 +0530 Subject: [PATCH 11/77] rename edge function to query param --- netlify.toml | 2 +- netlify/functions/oembed.mts | 2 +- opengraph.ts => s.ts | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename opengraph.ts => s.ts (100%) diff --git a/netlify.toml b/netlify.toml index 27e30ce9..50aa5ada 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,3 +1,3 @@ [[edge_functions]] - function = "opengraph" + function = "s" path = "/*" diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts index e1675dea..26db0e2e 100644 --- a/netlify/functions/oembed.mts +++ b/netlify/functions/oembed.mts @@ -1,4 +1,4 @@ -import type { Context } from '@netlify/functions'; +import type { Config, Context } from '@netlify/edge-functions'; const api = 'http://noembed.com/embed?url=https://youtube.com/watch?v='; export default async (req: Request, context: Context) => { diff --git a/opengraph.ts b/s.ts similarity index 100% rename from opengraph.ts rename to s.ts From 0caea6d57136323631fd444c4987c7a41a6e122e Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 11:48:29 +0530 Subject: [PATCH 12/77] remove serverless function --- netlify/functions/oembed.mts | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 netlify/functions/oembed.mts diff --git a/netlify/functions/oembed.mts b/netlify/functions/oembed.mts deleted file mode 100644 index 26db0e2e..00000000 --- a/netlify/functions/oembed.mts +++ /dev/null @@ -1,14 +0,0 @@ -import type { Config, Context } from '@netlify/edge-functions'; -const api = 'http://noembed.com/embed?url=https://youtube.com/watch?v='; - -export default async (req: Request, context: Context) => { - - const param = new URL(req.url).searchParams.get('s') || 'aQvGIIdgFDM'; - const data = await fetch(api + param).then(res => res.json()); - - return Response.json(data); -}; - -export const config: Config = { - path: "/*", -}; From 2eb3d7ae73b20891b08f278001e6da62cc135b25 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 11:53:49 +0530 Subject: [PATCH 13/77] fix silly mistake --- index.html | 4 ++-- s.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index f2c704cd..950479d2 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - + @@ -410,4 +410,4 @@

playlist or channel items show here

- + \ No newline at end of file diff --git a/s.ts b/s.ts index 0c04a22d..8579de7a 100644 --- a/s.ts +++ b/s.ts @@ -5,7 +5,7 @@ export default async (request: Request, context: Context) => { // Just return what was requested without transforming it, // unless we fnd the query parameter for this demo const url = new URL(request.url); - if (url.searchParams.has('s')) + if (!url.searchParams.has('s')) return; From 54f8ca3acc73292b25db675fb2bfb3c9b4cc4f67 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 11:55:55 +0530 Subject: [PATCH 14/77] fix silly mistake --- s.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/s.ts b/s.ts index 8579de7a..41f10b9e 100644 --- a/s.ts +++ b/s.ts @@ -18,7 +18,7 @@ export default async (request: Request, context: Context) => { const standardOG = ` - + `; const newOG = ` From 3019481566a17796803bddd4cd09decfb5a969c7 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:01:20 +0530 Subject: [PATCH 15/77] enable test response for body change --- index.html | 6 +----- s.ts | 14 +++----------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 950479d2..1807914e 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,7 @@ - - - - + diff --git a/s.ts b/s.ts index 41f10b9e..bddbd361 100644 --- a/s.ts +++ b/s.ts @@ -2,19 +2,12 @@ import { Context, Config } from "@netlify/edge-functions"; export default async (request: Request, context: Context) => { - // Just return what was requested without transforming it, - // unless we fnd the query parameter for this demo const url = new URL(request.url); - if (!url.searchParams.has('s')) - return; - + const id = url.searchParams.get('s'); + if (!id) return; - // Get the page content const response = await context.next(); const page = await response.text(); - const id = url.searchParams.get('s'); - - const standardOG = ` @@ -27,8 +20,7 @@ export default async (request: Request, context: Context) => { ` - - const updatedPage = page.replace(standardOG, newOG); + const updatedPage = page.replace(standardOG, newOG).replace('ytify 6.9', 'test body change response'); return new Response(updatedPage, response); }; From cb7b450d34afb5ddba6aad259caa7c5d8ea4f9b2 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:08:21 +0530 Subject: [PATCH 16/77] move to correct directory --- s.ts => netlify/functions/s.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename s.ts => netlify/functions/s.ts (100%) diff --git a/s.ts b/netlify/functions/s.ts similarity index 100% rename from s.ts rename to netlify/functions/s.ts From 6e03996cbeefd0152872d9cecb4feb49c5aaa3e8 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:11:21 +0530 Subject: [PATCH 17/77] rename to edge-function directory --- netlify/{functions => edge-functions}/s.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename netlify/{functions => edge-functions}/s.ts (100%) diff --git a/netlify/functions/s.ts b/netlify/edge-functions/s.ts similarity index 100% rename from netlify/functions/s.ts rename to netlify/edge-functions/s.ts From 7bb089f77f9b8bec10f18cd6310a71a637949756 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:15:05 +0530 Subject: [PATCH 18/77] test head change response --- netlify/edge-functions/s.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/netlify/edge-functions/s.ts b/netlify/edge-functions/s.ts index bddbd361..9b90ed4b 100644 --- a/netlify/edge-functions/s.ts +++ b/netlify/edge-functions/s.ts @@ -20,7 +20,7 @@ export default async (request: Request, context: Context) => { ` - const updatedPage = page.replace(standardOG, newOG).replace('ytify 6.9', 'test body change response'); + const updatedPage = page.replace(standardOG, newOG).replace('48-160kbps Opus YouTube Audio Streaming Web App.', 'test head change response'); return new Response(updatedPage, response); }; From ee65b2023162e75d770beee703c0eb1e08df5dee Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:18:16 +0530 Subject: [PATCH 19/77] test function name param overlap --- netlify.toml | 2 +- netlify/edge-functions/{s.ts => opengraph.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename netlify/edge-functions/{s.ts => opengraph.ts} (100%) diff --git a/netlify.toml b/netlify.toml index 50aa5ada..27e30ce9 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,3 +1,3 @@ [[edge_functions]] - function = "s" + function = "opengraph" path = "/*" diff --git a/netlify/edge-functions/s.ts b/netlify/edge-functions/opengraph.ts similarity index 100% rename from netlify/edge-functions/s.ts rename to netlify/edge-functions/opengraph.ts From 83ec1b04b57d29793533191bc17ac9775aab35a7 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:24:40 +0530 Subject: [PATCH 20/77] use injection point to dynamically add og tags --- index.html | 7 ++----- netlify/edge-functions/opengraph.ts | 10 ++++++++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 1807914e..07befc73 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,8 @@ content="ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic"> - - - - - + + diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 9b90ed4b..596860e3 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -4,23 +4,29 @@ export default async (request: Request, context: Context) => { const url = new URL(request.url); const id = url.searchParams.get('s'); - if (!id) return; const response = await context.next(); const page = await response.text(); + const injectionPoint = ''; + const standardOG = ` + + `; const newOG = ` + + ` + const og = id ? newOG : standardOG; - const updatedPage = page.replace(standardOG, newOG).replace('48-160kbps Opus YouTube Audio Streaming Web App.', 'test head change response'); + const updatedPage = page.replace(injectionPoint, og); return new Response(updatedPage, response); }; From 3ee290d6302c2e11af8ddf173fb62344e0e271fd Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 12:44:13 +0530 Subject: [PATCH 21/77] return piped data response --- netlify/edge-functions/opengraph.ts | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 596860e3..69a0546e 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -5,26 +5,27 @@ export default async (request: Request, context: Context) => { const url = new URL(request.url); const id = url.searchParams.get('s'); - const response = await context.next(); - const page = await response.text(); - const injectionPoint = ''; - - - const standardOG = ` + const og = id ? (await fetch('https://pipedapi.drgns.space/streams/' + id) + .then(res => res.json()) + .then(data => ` + + + + + + `)) : ` `; - const newOG = ` - - - - - - ` - const og = id ? newOG : standardOG; + + const response = await context.next(); + const page = await response.text(); + const injectionPoint = ''; + + const updatedPage = page.replace(injectionPoint, og); return new Response(updatedPage, response); From b77cf6dc121395f8dc43c77f92c4cff0964cc7ae Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:17:48 +0530 Subject: [PATCH 22/77] improve code --- index.html | 18 +++++++----- netlify/edge-functions/opengraph.ts | 44 +++++++++++++++-------------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 07befc73..9a5a835f 100644 --- a/index.html +++ b/index.html @@ -4,21 +4,25 @@ - - + + - + + - + + + + + - + diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 69a0546e..b898c4e9 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -1,33 +1,35 @@ import { Context, Config } from "@netlify/edge-functions"; +let keywords = 'ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic'; +let thumbnail = '/ytify_thumbnail_min.webp'; +let title = 'ytify'; +let description = '48-160kbps Opus YouTube Audio Streaming Web App.'; +let url = 'https://ytify.netlify.app' + export default async (request: Request, context: Context) => { - const url = new URL(request.url); - const id = url.searchParams.get('s'); - - const og = id ? (await fetch('https://pipedapi.drgns.space/streams/' + id) - .then(res => res.json()) - .then(data => ` - - - - - - `)) : ` - - - - - - `; + const id = new URL(request.url).searchParams.get('s'); + + if (id) + await fetch('https://pipedapi.drgns.space/streams/' + id) + .then(res => res.json()) + .then(data => { + title = data.title; + url += '?s=' + id; + description = data.description; + thumbnail = data.thumbnailUrl; + }); const response = await context.next(); const page = await response.text(); - const injectionPoint = ''; - + const updatedPage = page + .replace('{thumbnail}', thumbnail) + .replace('{title}', title) + .replace('{keywords}', keywords) + .replace('{description}', description) + .replace('{url}', url); - const updatedPage = page.replace(injectionPoint, og); return new Response(updatedPage, response); }; From 90ed6a4abead6083b3dd92b63136e9a760f1f86d Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:19:50 +0530 Subject: [PATCH 23/77] fix lint include keywords reassignment --- netlify/edge-functions/opengraph.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index b898c4e9..509a33e4 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -14,6 +14,7 @@ export default async (request: Request, context: Context) => { await fetch('https://pipedapi.drgns.space/streams/' + id) .then(res => res.json()) .then(data => { + keywords = data.tags; title = data.title; url += '?s=' + id; description = data.description; From 8536302a9db98ae9ae274d80549fa6d073a86e67 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:25:18 +0530 Subject: [PATCH 24/77] use replaceAll for thumbnail --- netlify/edge-functions/opengraph.ts | 2 +- package.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 509a33e4..afeecb23 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -24,7 +24,7 @@ export default async (request: Request, context: Context) => { const response = await context.next(); const page = await response.text(); const updatedPage = page - .replace('{thumbnail}', thumbnail) + .replaceAll('{thumbnail}', thumbnail) .replace('{title}', title) .replace('{keywords}', keywords) .replace('{description}', description) diff --git a/package.json b/package.json index 87d382a8..792d1c34 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ }, "devDependencies": { "@netlify/edge-functions": "^2.6.1", - "@netlify/functions": "^2.6.0", "autoprefixer": "^10.4.19", "eruda": "^3.0.1", "typescript": "^5.4.5", @@ -24,4 +23,4 @@ "browserslist": [ "defaults" ] -} +} \ No newline at end of file From 25d1eb8d8d29cc861797688f7bc5be0322a67790 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:36:02 +0530 Subject: [PATCH 25/77] change lib to es2021 --- index.html | 8 ++++---- netlify/edge-functions/opengraph.ts | 11 ++++++----- tsconfig.json | 5 +++-- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 9a5a835f..6f2b2ddc 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,14 @@ - + - + @@ -19,7 +19,7 @@ - + diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index afeecb23..e10620cb 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -10,6 +10,9 @@ export default async (request: Request, context: Context) => { const id = new URL(request.url).searchParams.get('s'); + const response = await context.next(); + const page = await response.text(); + if (id) await fetch('https://pipedapi.drgns.space/streams/' + id) .then(res => res.json()) @@ -18,17 +21,15 @@ export default async (request: Request, context: Context) => { title = data.title; url += '?s=' + id; description = data.description; - thumbnail = data.thumbnailUrl; + page.replaceAll(thumbnail, data.thumbnail); }); - const response = await context.next(); - const page = await response.text(); const updatedPage = page - .replaceAll('{thumbnail}', thumbnail) .replace('{title}', title) .replace('{keywords}', keywords) .replace('{description}', description) - .replace('{url}', url); + .replace('{url}', url) + return new Response(updatedPage, response); diff --git a/tsconfig.json b/tsconfig.json index e43a17e9..903ea961 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "useDefineForClassFields": false, "module": "ESNext", "lib": [ - "ES2020", + "ES2021", "DOM", "DOM.Iterable" ], @@ -21,6 +21,7 @@ "noFallthroughCasesInSwitch": true }, "include": [ - "src" + "src", + "netlify" ] } \ No newline at end of file From 4ea639e6f9561b217fe56c383e788edc1fb1c51f Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:39:50 +0530 Subject: [PATCH 26/77] fix lint --- netlify/edge-functions/opengraph.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index e10620cb..d4033ae2 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -1,7 +1,6 @@ import { Context, Config } from "@netlify/edge-functions"; let keywords = 'ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic'; -let thumbnail = '/ytify_thumbnail_min.webp'; let title = 'ytify'; let description = '48-160kbps Opus YouTube Audio Streaming Web App.'; let url = 'https://ytify.netlify.app' @@ -21,7 +20,7 @@ export default async (request: Request, context: Context) => { title = data.title; url += '?s=' + id; description = data.description; - page.replaceAll(thumbnail, data.thumbnail); + page.replaceAll('/ytify_thumbnail_min.webp', data.thumbnail); }); const updatedPage = page From 41e99e0529b5b036573551a3b642657913892716 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 14:44:31 +0530 Subject: [PATCH 27/77] test fix --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6f2b2ddc..b554e174 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,8 @@ - + content="48kb/s to 160kb/s youtube audio streaming website. Copy a youtube video link or search a video up and listen to it as an audio totally free. Background Playback, Queues, Themes for a great user experience."> + From 1d145dc5cd772b236e8e35bd282b81ac8a382866 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 15:01:55 +0530 Subject: [PATCH 28/77] test fix --- index.html | 14 +++++++------- netlify/edge-functions/opengraph.ts | 11 ++++++----- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index b554e174..6bb748c1 100644 --- a/index.html +++ b/index.html @@ -10,24 +10,24 @@ - + - - - + + + - - - + + + ytify diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index d4033ae2..87d60713 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -20,14 +20,15 @@ export default async (request: Request, context: Context) => { title = data.title; url += '?s=' + id; description = data.description; - page.replaceAll('/ytify_thumbnail_min.webp', data.thumbnail); + page + .replace('"ytify"', `"${data.title}"`) + .replaceAll('/ytify_thumbnail_min.webp', data.thumbnail); }); const updatedPage = page - .replace('{title}', title) - .replace('{keywords}', keywords) - .replace('{description}', description) - .replace('{url}', url) + .replace('-keywords', keywords) + .replace('-description', description) + .replace('-url', url) From 34d0ca8e6f1f33d71b0d7b5a9da86127bfc20a06 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 15:03:56 +0530 Subject: [PATCH 29/77] test fix --- netlify/edge-functions/opengraph.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 87d60713..d08ff0f4 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -1,7 +1,6 @@ import { Context, Config } from "@netlify/edge-functions"; let keywords = 'ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic'; -let title = 'ytify'; let description = '48-160kbps Opus YouTube Audio Streaming Web App.'; let url = 'https://ytify.netlify.app' @@ -17,7 +16,6 @@ export default async (request: Request, context: Context) => { .then(res => res.json()) .then(data => { keywords = data.tags; - title = data.title; url += '?s=' + id; description = data.description; page From 75cedfec0248cc0c0e5edf5d0e03ddda247039b0 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 15:05:59 +0530 Subject: [PATCH 30/77] test fix --- netlify/edge-functions/opengraph.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index d08ff0f4..36fd9790 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -20,7 +20,7 @@ export default async (request: Request, context: Context) => { description = data.description; page .replace('"ytify"', `"${data.title}"`) - .replaceAll('/ytify_thumbnail_min.webp', data.thumbnail); + .replaceAll('/ytify_thumbnail_min.webp', data.thumbnailUrl); }); const updatedPage = page From 6754bdc688e8b38b6a58aa09f577b67a9224a0b3 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 15:15:14 +0530 Subject: [PATCH 31/77] test fix --- netlify/edge-functions/opengraph.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index 36fd9790..f0384c7c 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -9,7 +9,7 @@ export default async (request: Request, context: Context) => { const id = new URL(request.url).searchParams.get('s'); const response = await context.next(); - const page = await response.text(); + let page = await response.text(); if (id) await fetch('https://pipedapi.drgns.space/streams/' + id) @@ -18,19 +18,19 @@ export default async (request: Request, context: Context) => { keywords = data.tags; url += '?s=' + id; description = data.description; - page + page = page .replace('"ytify"', `"${data.title}"`) .replaceAll('/ytify_thumbnail_min.webp', data.thumbnailUrl); }); - const updatedPage = page + page = page .replace('-keywords', keywords) .replace('-description', description) .replace('-url', url) - return new Response(updatedPage, response); + return new Response(page, response); }; export const config: Config = { From cf18ba46629a019a4cbaea888e494c07c43c6abb Mon Sep 17 00:00:00 2001 From: n-ce Date: Sat, 4 May 2024 15:35:55 +0530 Subject: [PATCH 32/77] test fix --- index.html | 7 +++--- netlify/edge-functions/opengraph.ts | 37 +++++++++++++---------------- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 6bb748c1..212e3097 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,16 @@ - + - - + + diff --git a/netlify/edge-functions/opengraph.ts b/netlify/edge-functions/opengraph.ts index f0384c7c..a794a102 100644 --- a/netlify/edge-functions/opengraph.ts +++ b/netlify/edge-functions/opengraph.ts @@ -1,34 +1,29 @@ import { Context, Config } from "@netlify/edge-functions"; -let keywords = 'ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic'; -let description = '48-160kbps Opus YouTube Audio Streaming Web App.'; -let url = 'https://ytify.netlify.app' +const keywords = 'ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player , youtube-player , free-music, ytmusic'; +const description = '48-160kbps Opus YouTube Audio Streaming Web App.'; +const url = 'https://ytify.netlify.app'; export default async (request: Request, context: Context) => { const id = new URL(request.url).searchParams.get('s'); - const response = await context.next(); - let page = await response.text(); - - if (id) - await fetch('https://pipedapi.drgns.space/streams/' + id) - .then(res => res.json()) - .then(data => { - keywords = data.tags; - url += '?s=' + id; - description = data.description; - page = page - .replace('"ytify"', `"${data.title}"`) - .replaceAll('/ytify_thumbnail_min.webp', data.thumbnailUrl); - }); - page = page - .replace('-keywords', keywords) - .replace('-description', description) - .replace('-url', url) + if (!id) return; + const response = await context.next(); + let page = await response.text(); + await fetch('https://pipedapi.drgns.space/streams/' + id) + .then(res => res.json()) + .then(data => { + page = page + .replace(keywords, data.tags) + .replace(description, data.description) + .replace('"ytify"', `"${data.title}"`) + .replace(url, `${url}?s=${id}`) + .replaceAll('/ytify_thumbnail_min.webp', data.thumbnailUrl); + }); return new Response(page, response); }; From bccda1f3c965125e5c9000740f85d14211d498b8 Mon Sep 17 00:00:00 2001 From: n-ce Date: Sun, 5 May 2024 15:26:13 +0530 Subject: [PATCH 33/77] initial solid-js component (1/4) --- package.json | 6 ++- src/components/UpdatePrompt.css | 50 +++++++++++++++++++ src/components/UpdatePrompt.tsx | 48 ++++++++++++++++++ src/components/updatePrompt.ts | 86 --------------------------------- src/scripts/main.ts | 14 +++--- src/stylesheets/style.css | 20 +------- tsconfig.json | 4 +- vite.config.ts | 3 +- 8 files changed, 115 insertions(+), 116 deletions(-) create mode 100644 src/components/UpdatePrompt.css create mode 100644 src/components/UpdatePrompt.tsx delete mode 100644 src/components/updatePrompt.ts diff --git a/package.json b/package.json index 792d1c34..6e23b00c 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "imsc": "^1.1.5", - "lit": "^3.1.3" + "lit": "^3.1.3", + "solid-js": "^1.8.17" }, "devDependencies": { "@netlify/edge-functions": "^2.6.1", @@ -18,7 +19,8 @@ "eruda": "^3.0.1", "typescript": "^5.4.5", "vite": "^5.2.10", - "vite-plugin-pwa": "^0.19.8" + "vite-plugin-pwa": "^0.19.8", + "vite-plugin-solid": "^2.10.2" }, "browserslist": [ "defaults" diff --git a/src/components/UpdatePrompt.css b/src/components/UpdatePrompt.css new file mode 100644 index 00000000..abfb0a46 --- /dev/null +++ b/src/components/UpdatePrompt.css @@ -0,0 +1,50 @@ +#changelog { + display: flex; + flex-direction: column; + position: fixed; + z-index: 4; + width: calc(100% - 10dvmin); + height: calc(100% - 10dvmin); + background-color: var(--bg); + animation: zoomout 0.5s ease-in-out forwards; + + + @keyframes zoomout { + from { + transform: scale(2); + opacity: 0; + } + } + + ul { + background-color: var(--onBg); + border-radius: calc(var(--roundness) + 0.75vmin); + color: var(--text); + box-shadow: var(--shadow); + border: var(--border); + padding: 2vmin; + overflow: hidden scroll; + max-height: 80dvh; + max-width: calc(100% - 10dvmin); + + li { + &:first-child { + list-style-type: none; + font-size: 1.5rem; + font-weight: bolder; + margin-bottom: 5%; + } + } + + hr { + border: 1px solid var(--text); + opacity: 0.5; + } + } + + span { + display: flex; + justify-content: space-between; + } + +} \ No newline at end of file diff --git a/src/components/UpdatePrompt.tsx b/src/components/UpdatePrompt.tsx new file mode 100644 index 00000000..f9d38771 --- /dev/null +++ b/src/components/UpdatePrompt.tsx @@ -0,0 +1,48 @@ +import { createSignal } from "solid-js"; +import './UpdatePrompt.css'; + +export default function UpdatePrompt(handleUpdate: () => void) { + + const [list, setList] = createSignal([
  • Loading Update
    • ]); + const [fullList, setFullList] = createSignal(['']); + + + fetch('https://api.github.com/repos/n-ce/ytify/commits/main') + .then(res => res.json()) + .then(data => data.commit.message.split('-')) + .then(list => list.map((text: string) => (
  • {text}
    • ))) + .then(e => setList(e)) + + + function handleLater(e: Event) { + const dialog = ((e.target as HTMLElement).parentElement as HTMLUListElement).parentElement as HTMLDialogElement; + dialog.close(); + dialog.remove(); + } + + const handleFullList = () => + fetch('https://raw.githubusercontent.com/wiki/n-ce/ytify/Changelog.md') + .then(res => res.text()) + .then(text => text.split('\n')) + .then(e => setFullList(e)); + + + return ( + +
      + {list()} +
      + {fullList().length > 2 ? + fullList().map((text: string) => (
    • {text}
      • )) + : +
    • Read all previous changes
      • + } +
    + + + + +     + ); + +} diff --git a/src/components/updatePrompt.ts b/src/components/updatePrompt.ts deleted file mode 100644 index b6c61015..00000000 --- a/src/components/updatePrompt.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { LitElement, css, html } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { until } from 'lit/directives/until.js'; - -const fetchList = () => fetch('https://api.github.com/repos/n-ce/ytify/commits/main') - .then(res => res.json()) - .then(data => data.commit.message.split('-')) - .then(array => array.map((c: string) => html`
  • ${c}
    • `)); - -const fetchChangelog = () => fetch('https://raw.githubusercontent.com/wiki/n-ce/ytify/Changelog.md') - .then(res => res.text()); - -@customElement('update-prompt') -export class UpdatePrompt extends LitElement { - - static styles = css` - :host { - background-color: var(--onBg); - border-radius: calc(var(--roundness) + 0.75vmin); - color: var(--text); - box-shadow:var(--shadow); - border:var(--border); - display: flex; - flex-direction: column; - padding:0 2vmin; - } - ul { - overflow: scroll; - margin-left: -3.2ch; - max-height: 80dvh; - } - ul li:first-child { - list-style-type:none; - font-size: 1.5rem; - font-weight: bolder; - margin-bottom: 5%; - } - span { - display: flex; - justify-content:space-between; - } - button { - width: 49%; - border: var(--border); - border-radius: var(--roundness); - background: var(--text); - color: var(--bg); - font-family: inherit; - font-size: inherit; - padding: 1vmin 2vmin; - margin: 2.4vmin 0; - } - button:hover { - background-color: var(--bg); - color: var(--text); - } - `; - - @property() handleUpdate = () => { }; - @state() changelog = ''; - - handleLater() { - const dialog = this.parentElement; - dialog.close(); - dialog.remove(); // remove from DOM - } - - render() { - return html` -
      - ${until(fetchList(), html`
    • Loading Update...
      • `)} -
    • { - if (!this.changelog) - this.changelog = await fetchChangelog(); - alert(this.changelog); - }}>Read changes from previous versions
      • - - -
    - - - - - `; - } -} diff --git a/src/scripts/main.ts b/src/scripts/main.ts index a0180f4b..a5e15fa3 100644 --- a/src/scripts/main.ts +++ b/src/scripts/main.ts @@ -16,15 +16,13 @@ import '../components/toggleSwitch'; if (import.meta.env.PROD) import('virtual:pwa-register').then(pwa => { - const updater = document.createElement('update-prompt') as HTMLElement & { handleUpdate(): void }; - - updater.handleUpdate = pwa.registerSW({ + const handleUpdate = pwa.registerSW({ async onNeedRefresh() { - const { html, render } = await import('lit'); - import('../components/updatePrompt').then(() => render( - html`${updater}`, - document.body - )); + import('../components/UpdatePrompt').then(mod => + import('solid-js/web').then(solid => solid.render( + () => mod.default(handleUpdate), + document.body + ))); } }); }); diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css index 90f4d8a5..c06559f4 100644 --- a/src/stylesheets/style.css +++ b/src/stylesheets/style.css @@ -254,7 +254,8 @@ list-item:hover { details, #queuetools, #listTools, -#settings { +#settings, +#changelog { button { border: var(--border); border-radius: var(--roundness); @@ -290,21 +291,4 @@ details, .ri-loader-3-line { animation: spinner 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; -} - - -#changelog { - position: fixed; - z-index: 4; - width: calc(100% - 10dvmin); - height: calc(100% - 10dvmin); - background-color: var(--bg); - animation: zoomout 0.5s ease-in-out forwards; -} - -@keyframes zoomout { - from { - transform: scale(2); - opacity: 0; - } } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 903ea961..ab225958 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,9 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + "jsx": "preserve", + "jsxImportSource": "solid-js" }, "include": [ "src", diff --git a/vite.config.ts b/vite.config.ts index 7b670419..21e7f9b4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig, PluginOption } from 'vite'; import { VitePWA } from 'vite-plugin-pwa'; import autoprefixer from 'autoprefixer'; - +import solidPlugin from 'vite-plugin-solid'; const injectEruda = (serve: boolean) => serve ? ({ name: 'erudaInjector', @@ -29,6 +29,7 @@ const injectEruda = (serve: boolean) => serve ? ({ export default defineConfig(({ command }) => ({ plugins: [ injectEruda(command === 'serve'), + solidPlugin(), VitePWA({ manifest: { "short_name": "Ytify", From 2295e9cc9a45f315e267fdc4a765c0ea0180dcec Mon Sep 17 00:00:00 2001 From: n-ce Date: Mon, 6 May 2024 23:07:01 +0530 Subject: [PATCH 34/77] migrarion almost finished except for rendering library collections, might implement a component for that and pending fetchlist refactor --- package.json | 4 +- src/components/ListItem.css | 63 +++++++++ src/components/ListItem.tsx | 52 +++++++ src/components/StreamItem.css | 108 +++++++++++++++ src/components/StreamItem.tsx | 92 +++++++++++++ src/components/toggleSwitch.css | 55 ++++++++ src/components/toggleSwitch.ts | 102 +++++--------- src/lib/libraryUtils.ts | 41 +++--- src/lib/utils.ts | 231 ++++++++++++++++---------------- src/scripts/main.ts | 1 + src/scripts/settings.ts | 16 ++- src/scripts/superModal.ts | 2 +- 12 files changed, 556 insertions(+), 211 deletions(-) create mode 100644 src/components/ListItem.css create mode 100644 src/components/ListItem.tsx create mode 100644 src/components/StreamItem.css create mode 100644 src/components/StreamItem.tsx create mode 100644 src/components/toggleSwitch.css diff --git a/package.json b/package.json index 6e23b00c..6779876a 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "autoprefixer": "^10.4.19", "eruda": "^3.0.1", "typescript": "^5.4.5", - "vite": "^5.2.10", - "vite-plugin-pwa": "^0.19.8", + "vite": "^5.2.11", + "vite-plugin-pwa": "^0.20.0", "vite-plugin-solid": "^2.10.2" }, "browserslist": [ diff --git a/src/components/ListItem.css b/src/components/ListItem.css new file mode 100644 index 00000000..eb58965a --- /dev/null +++ b/src/components/ListItem.css @@ -0,0 +1,63 @@ +.listItem { + background-color: var(--onBg); + height: 20vmin; + width: calc(100% - 2vmin); + margin-bottom: 1vmin; + padding: 1vmin; + border-radius: calc(var(--roundness) + 0.75vmin); + display: flex; + transition: all 0.3s ease-out; + + * { + pointer-events: none; + transition: all 0.4s; + } + + &:hover { + transform: scale(0.95); + } + + &.ravel { + * { + opacity: 0; + } + } + + + img { + height: 100%; + border-radius: var(--roundness); + } + + div { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + margin-left: 1vmin; + } + + p { + margin: 0; + padding: 0; + } + + p.title { + display: flex; + height: 10vmin; + font-size: medium; + overflow: hidden; + } + + p.uData { + font-size: small; + height: 25%; + overflow: hidden; + } + + p.stats { + font-size: medium; + height: 25%; + } + +} \ No newline at end of file diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx new file mode 100644 index 00000000..1582c4eb --- /dev/null +++ b/src/components/ListItem.tsx @@ -0,0 +1,52 @@ +import { hostResolver } from '../lib/utils'; +import './ListItem.css'; + +import { createSignal } from 'solid-js'; + +export default function ListItem( + title: string, + stats: string, + thumbnail: string, + uploader_data: string, + url: string, + imgLoading: 'eager' | 'lazy', +) { + const [getThumbnail, setThumbnail] = createSignal(thumbnail); + + const handleError = () => + setThumbnail( + getThumbnail().includes('rj') + ? getThumbnail().replace('rj', 'rw') + : '/logo192.png' + ); + + function handleLoad(e: Event) { + const img = e.target as HTMLImageElement; + img.parentElement!.classList.remove('ravel'); + + if (img.naturalHeight === 90) + setThumbnail(getThumbnail().replace('_webp', '').replace('webp', 'jpg')); + } + + + return ( + + +
    +

    {title}

    +

    {uploader_data}

    +

    {stats}

    +
    +     + ); +} diff --git a/src/components/StreamItem.css b/src/components/StreamItem.css new file mode 100644 index 00000000..768f4e20 --- /dev/null +++ b/src/components/StreamItem.css @@ -0,0 +1,108 @@ +.streamItem { + height: 20vmin; + width: calc(100% - 2vmin); + user-select: none; + background-color: var(--onBg); + padding: 1vmin; + margin-bottom: 1vmin; + border-radius: calc(var(--roundness) + 0.75vmin); + display: flex; + transition: all 0.3s ease-out; + + * { + pointer-events: none; + transition: all 0.4s; + } + + &:hover { + transform: scale(0.95); + } + + &.ravel { + * { + opacity: 0; + } + } + + p { + margin: 0; + padding: 0; + font-size: smaller; + overflow: hidden; + } + + span { + position: relative; + z-index: 0; + height: 20vmin; + margin-right: 1vmin; + } + + .thumbnail { + height: 100%; + border-radius: var(--roundness); + } + + .duration { + position: absolute; + margin: 0; + padding: 0.5vmin 1vmin; + bottom: 1.1vmin; + right: 1.2vmin; + background-color: #0007; + color: #fffc; + font-weight: bold; + font-size: small; + border-radius: 1vmin; + } + + .title { + font-size: 1rem; + line-height: 1.3rem; + height: 2.6rem; + word-break: break-all; + overflow: hidden; + } + + div { + display: flex; + overflow: hidden; + } + + .metadata { + display: flex; + flex-direction: column; + height: 100%; + width: 90%; + } + + .avu { + display: flex; + flex-direction: column; + font-size: 1rem; + opacity: 0.8; + } + + .author { + line-height: 1rem; + max-height: 1rem; + overflow: hidden; + } + + @media(orientation:landscape) { + .avu { + width: 100%; + display: inline-flex; + flex-direction: row; + justify-content: space-between; + } + + .title { + height: 50%; + } + + .author { + height: initial; + } + } +} \ No newline at end of file diff --git a/src/components/StreamItem.tsx b/src/components/StreamItem.tsx new file mode 100644 index 00000000..4fb4bd52 --- /dev/null +++ b/src/components/StreamItem.tsx @@ -0,0 +1,92 @@ +import { createSignal } from 'solid-js'; +import './StreamItem.css'; +import { instanceSelector } from '../lib/dom'; +import { getApi } from '../lib/utils'; +import { generateImageUrl } from '../lib/imageUtils'; + + +export default function StreamItem( + id: string, + href: string, + title: string, + author: string, + duration: string, + uploaded: string | undefined, + channelUrl: string, + views: string | undefined, + imgLoad: boolean, + imgLoadStyle: 'eager' | 'lazy', + imgYTM: string = '' +) { + + const [tsrc, setTsrc] = createSignal(''); + + let parent!: HTMLAnchorElement; + + + function handleThumbnailLoad() { + const img = parent.firstElementChild as HTMLImageElement; + const store = tsrc(); + + if (img.naturalWidth !== 120) { + parent.classList.remove('ravel'); + return; + } + if (store.includes('webp')) + setTsrc(store.replace('.webp', '.jpg').replace('vi_webp', 'vi')); + else { // most likely been removed from yt so remove it + parent.classList.add('delete'); + parent.click(); + } + } + + function handleThumbnailError() { + + const index = instanceSelector.selectedIndex; + const currentImgPrxy = getApi('image', index); + const nextImgPrxy = getApi('image', index + 1); + const store = tsrc(); + + parent.classList.remove('ravel'); + + + if (!store.includes(currentImgPrxy)) return; + + setTsrc(store.replace(currentImgPrxy, nextImgPrxy)); + } + + if (imgLoad) + setTsrc(generateImageUrl(imgYTM || id, 'mqdefault')); + + return ( + + + +

    {duration}

    +     +
    +

    {title}

    +
    +

    {author}

    +

    {(views || '') + (uploaded ? ' • ' + uploaded.replace('Streamed ', '') : '')}

    +
    +
    +     + ) +} diff --git a/src/components/toggleSwitch.css b/src/components/toggleSwitch.css new file mode 100644 index 00000000..76844e38 --- /dev/null +++ b/src/components/toggleSwitch.css @@ -0,0 +1,55 @@ +:host { + display: flex; + align-items: center; + margin: 4vmin 0; + color: inherit; +} + + +label { + margin-left: auto; + position: relative; + display: inline-block; + pointer-events: none; + width: 9vmin; + height: 6vmin; +} + +span { + cursor: pointer; + inset: 0; + background-color: var(--onBg); + border-radius: var(--roundness); + border: var(--border); + transform: scale(1.1); +} + +span:before { + position: absolute; + content: ""; + height: calc(100% - 2.1vmin); + aspect-ratio: 1; + margin: 1vmin; + background-color: var(--text); + border-radius: calc(var(--roundness) - 0.5vmin); + box-shadow: var(--shadow); +} + +span, +span:before { + position: absolute; + transition: 0.3s; +} + +input { + display: none; +} + +input:checked+span { + background-color: var(--bg); +} + +input:checked+span:before { + margin-left: -0.4vmin; + transform: translateX(4.6vmin); +} \ No newline at end of file diff --git a/src/components/toggleSwitch.ts b/src/components/toggleSwitch.ts index d7fa88b1..45301546 100644 --- a/src/components/toggleSwitch.ts +++ b/src/components/toggleSwitch.ts @@ -1,85 +1,43 @@ -import { LitElement, css, html } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { $ } from '../lib/utils'; +import css from '../components/toggleSwitch.css?inline'; +let root: ShadowRoot; -@customElement('toggle-switch') -export class ToggleSwitch extends LitElement { - - static styles = css` - :host { - display: flex; - align-items: center; - margin: 4vmin 0; - color: inherit; - } - - label { - margin-left: auto; - position: relative; - display: inline-block; - pointer-events: none; - width: 9vmin; - height: 6vmin; - } +customElements.define('toggle-switch', class extends HTMLElement { + constructor() { + super(); + root = this.attachShadow({ mode: 'open' }); + const style = $('style'); + style.textContent = css; - span { - cursor: pointer; - inset: 0; - background-color: var(--onBg); - border-radius: var(--roundness); - border: var(--border); - transform: scale(1.1); - } + const label = $('label'); - span:before { - position: absolute; - content: ""; - height: calc(100% - 2.1vmin); - aspect-ratio:1; - margin: 1vmin; - background-color: var(--text); - border-radius: calc(var(--roundness) - 0.5vmin); - box-shadow:var(--shadow); - } + const input = $('input'); + input.type = 'checkbox'; - span, - span:before { - position: absolute; - transition: 0.3s; - } + this.addEventListener('click', () => { + input.checked = !input.checked; + }); - input { - display: none; - } + label.append(input, $('span')); - input:checked+span { - background-color: var(--bg); - } + root.append(style, $('slot'), label); + /* +