7

netlify/edge-functions/opengraph.ts

@@ -0,0 +1,46 @@
+import { Context, Config } from '@netlify/edge-functions';
+
+export default async (request: Request, context: Context) => {
+
+  const req = new URL(request.url);
+
+  if (!req.searchParams.has('s')) return;
+
+  const id = req.searchParams.get('s');
+
+  if (id?.length !== 11) return;
+
+  const response = await context.next();
+  const page = await response.text();
+  const instance = 'https://invidious.fdn.fr';
+  const data = await fetch(instance + '/api/v1/videos/' + id).then(res => res.json());
+
+  // select the lowest bitrate aac stream i.e itag 139
+  let audioSrc = data.adaptiveFormats.find((v: { itag: number }) => v.itag == 139).url;
+
+  // Conditionally only proxy music streams
+  if (data.genre === 'Music')
+    audioSrc = audioSrc.replace(new URL(audioSrc).origin, instance);
+
+  const newPage = page
+    .replace('48-160kbps Opus YouTube Audio Streaming Web App.', data.author)
+    .replace('"ytify"', `"${data.title}"`)
+    .replace(<string>context.site.url, `${context.site.url}?s=${id}`)
+    .replaceAll('/ytify_thumbnail_min.webp', data.videoThumbnails.find((v: { quality: string }) => v.quality === 'medium').url)
+    // for audio embedding
+    .replace('<!-- a4 -->',
+      `<meta property="og:audio" content="${audioSrc}">
+      <meta property="og:audio:secure_url" content="${audioSrc}">
+      <meta property="og:video" content="${audioSrc}">
+      <meta property="og:audio:type" content="audio/aac">
+      <meta property="music.duration" content="${data.lengthSeconds}">`
+    )
+    .replace('"website"', '"music.song"');
+
+
+  return new Response(newPage, response);
+};
+
+export const config: Config = {
+  path: '/*',
+};

netlify/edge-functions/upcoming.ts

@@ -0,0 +1,75 @@
+// handles upcoming query requests to restore queue from any where
+
+import { Config } from '@netlify/edge-functions';
+
+function convertSStoHHMMSS(seconds: number) {
+  if (seconds < 0) return '';
+  const hh = Math.floor(seconds / 3600);
+  seconds %= 3600;
+  const mm = Math.floor(seconds / 60);
+  const ss = Math.floor(seconds % 60);
+  let mmStr = String(mm);
+  let ssStr = String(ss);
+  if (mm < 10) mmStr = '0' + mmStr;
+  if (ss < 10) ssStr = '0' + ssStr;
+  return (hh > 0 ?
+    hh + ':' : '') + `${mmStr}:${ssStr}`;
+}
+
+const instanceArray = await fetch('https://piped-instances.kavin.rocks')
+  .then(res => res.json())
+  .then(data => data.map((i: { api_url: string }) => i.api_url + '/streams/'))
+  .catch(() => ['https://pipedapi.kavin.rocks/streams/']);
+
+await fetch('https://api.invidious.io/instances.json')
+  .then(res => res.json())
+  .then(data => {
+    for (const i of data)
+      if (i[1].cors && i[1].api)
+        instanceArray.push(i[1].uri + '/api/v1/videos/')
+
+  })
+  .catch(() => ['https://invidious.fdn.fr/api/v1/videos/']);
+
+
+const getIndex = () => Math.floor(Math.random() * instanceArray.length);
+
+
+export default async (request: Request) => {
+
+  const uid = new URL(request.url).searchParams.get('id');
+
+  if (!uid) return;
+
+  const array = [];
+  for (let i = 0; i < uid.length; i += 11)
+    array.push(uid.slice(i, i + 11));
+
+  const getData = async (
+    id: string,
+    api: string = instanceArray[getIndex()]
+  ): Promise<Record<'id' | 'title' | 'author' | 'authorId' | 'duration' | 'duration' | 'thumbnailUrl' | 'source', string>> => await fetch(api + id)
+    .then(res => res.json())
+    .then(json => ({
+      'id': id,
+      'title': json.title,
+      'author': json.uploader || json.author,
+      'authorId': json.authorUrl || json.uploaderUrl.slice(9),
+      'duration': convertSStoHHMMSS(json.duration || json.lengthSeconds),
+      'thumbnailUrl': json.thumbnailUrl || json.videoThumbnails[4].url,
+      'source': api + id
+    }))
+    .catch(() => getData(id))
+
+
+  const promises = array.map(async (id) => await getData(id));
+  const response = await Promise.all(promises);
+
+  return new Response(JSON.stringify(response), {
+    headers: { 'content-type': 'application/json' },
+  });
+};
+
+export const config: Config = {
+  path: '/upcoming',
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ytify",
-  "version": "6.9.2",
+  "version": "7.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,15 +9,18 @@
     "update": "npx npm-check-updates -u"
   },
   "dependencies": {
+    "hls.js": "^1.5.8",
     "imsc": "^1.1.5",
-    "lit": "^3.1.3"
+    "solid-js": "^1.8.17"
   },
   "devDependencies": {
+    "@netlify/edge-functions": "^2.8.1",
     "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": [
     "defaults"

src/components/ListItem.css

@@ -0,0 +1,62 @@
+.listItem {
+  width: 48%;
+  height: auto;
+  background-color: var(--onBg);
+  padding: 1dvmin;
+  margin: 1%;
+  border: var(--border);
+  border-radius: calc(var(--roundness) + 0.75vmin);
+  transition: all 0.3s ease-out;
+  display: inline-block;
+
+  @media(orientation:landscape) {
+    width: 23%;
+  }
+
+  * {
+    pointer-events: none;
+    transition: all 0.4s;
+  }
+
+  &:hover {
+    transform: scale(0.95);
+  }
+
+  &.ravel {
+    * {
+      opacity: 0;
+    }
+  }
+
+
+  img {
+    height: auto;
+    width: 100%;
+    border-radius: var(--roundness);
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  p.title {
+    font-size: medium;
+    height: 2rem;
+    line-height: 1rem;
+    overflow: hidden;
+  }
+
+  p.uData {
+    font-size: x-small;
+    line-height: 0.8rem;
+    overflow: hidden;
+  }
+
+  p.stats {
+    font-size: small;
+    height: 1rem;
+    line-height: 1rem;
+  }
+
+}

src/components/ListItem.tsx

@@ -0,0 +1,56 @@
+import { hostResolver } from '../lib/utils';
+import './ListItem.css';
+import { Show, createSignal } from 'solid-js';
+
+// workaround "cannot access 'getSaved' before initialization"
+const s = localStorage.getItem('imgLoad');
+const showImage = (s === 'off') ? undefined : s ? 'lazy' : 'eager';
+
+export default function ListItem(
+  title: string,
+  stats: string,
+  thumbnail: string,
+  uploader_data: string,
+  url: string,
+) {
+  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 (
+    <a
+      class={'listItem ' + (showImage ? 'ravel' : '')}
+      href={hostResolver(url)}
+      data-url={url}
+      data-thumbnail={thumbnail}
+    >
+      <Show when={showImage}>
+        <img
+          loading={showImage as 'lazy' | 'eager' | undefined}
+          src={getThumbnail()}
+          onError={handleError}
+          onLoad={handleLoad}
+        />
+      </Show>
+      <div>
+        <p class="title">{title}</p>
+        <p class="uData">{uploader_data}</p>
+        <p class="stats">{stats}</p>
+      </div>
+    </a>
+  );
+}

src/components/StreamItem.css

@@ -0,0 +1,67 @@
+.streamItem {
+	width: 100%;
+	user-select: none;
+	background-color: var(--onBg);
+	padding: 1dvmin;
+	margin-bottom: 2dvmin;
+	border: var(--border);
+	border-radius: calc(var(--roundness) + 0.75vmin);
+	transition: transform 0.2s ease-out;
+	display: flex;
+	align-items: center;
+
+	* {
+		pointer-events: none;
+		transition: opacity 0.4s;
+	}
+
+	&:hover {
+		transform: scale(0.95);
+	}
+
+	&.ravel {
+		* {
+			opacity: 0;
+		}
+	}
+
+
+	span {
+		position: relative;
+		z-index: 0;
+		width: 50dvmin;
+		margin-right: 1vmin;
+
+
+		img {
+			width: 100%;
+			border-radius: var(--roundness);
+		}
+
+		.duration {
+			position: absolute;
+			padding: 0 1vmin;
+			bottom: 1.1vmin;
+			right: 1.2vmin;
+			background-color: #000a;
+			color: #fffc;
+			font-family: monospace;
+			border-radius: calc(var(--roundness)*1.1);
+		}
+	}
+
+	div {
+		width: 100%;
+
+		.avu {
+			font-size: small;
+			opacity: 0.8;
+
+			@media(orientation:landscape) {
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+	}
+
+}