proto youtube video viewer

package-lock.json

@@ -3620,6 +3620,11 @@
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
       "dev": true
     },
+    "get-youtube-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-youtube-id/-/get-youtube-id-1.0.1.tgz",
+      "integrity": "sha512-5yidLzoLXbtw82a/Wb7LrajkGn29BM6JuLWeHyNfzOGp1weGyW4+7eMz6cP23+etqj27VlOFtq8fFFDMLq/FXQ=="
+    },
     "getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@@ -4448,6 +4453,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "load-script2": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/load-script2/-/load-script2-2.0.4.tgz",
+      "integrity": "sha512-WzZ2Df8QvWwGdjcJ7BYqcaojHGBC+Dg3oFsBg8gyz/mGyjCduBKdja+HkRo7BHoqt8sV5oil1Bc6Eyq6e40jfg=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -7387,6 +7397,14 @@
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
       }
+    },
+    "yt-player": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/yt-player/-/yt-player-3.4.3.tgz",
+      "integrity": "sha512-Ke5oM+qW8CR6aaK40mTxBff3hS4DXjyfmFkjg3eoaGt8fWQGyKFOFIpZqzNTR5c7Lu+xAG9SIvxCvbBPhCBbPg==",
+      "requires": {
+        "load-script2": "^2.0.1"
+      }
     }
   }
 }

package.json

@@ -19,7 +19,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.7.7",
-    "get-urls": "^9.2.0"
+    "get-urls": "^9.2.0",
+    "get-youtube-id": "^1.0.1",
+    "yt-player": "^3.4.3"
   },
   "browserslist": [
     "last 1 chrome versions"

src/App.svelte

@@ -7,7 +7,8 @@
 
     <section class="player">
         {#if selectedEntry}
-            Playing <a href={selectedEntry.url}>{selectedEntry.url}</a>
+            Playing <a href={selectedEntry.url}>{selectedEntry.id}</a>
+            <YoutubeViewer bind:videoId={selectedEntry.id}></YoutubeViewer>
         {:else}
             Loading ...
         {/if}
@@ -19,8 +20,8 @@
         {:then entries}
             <ul>
                 {#each entries as entry}
-                    <li>
-                        <a href={entry.url}>{entry.url}</a>
+                    <li class="entry" class:active={entry === selectedEntry} on:click={selectEntry(entry)}>
+                        <b>{entry.status.account.acct}</b>
                         <small>{entry.tags}</small>
                     </li>
                 {/each}
@@ -37,8 +38,9 @@
 
 
 <script>
-    import { onMount } from 'svelte';
+    import { onMount } from 'svelte'
     import { fetchEntries } from './util.js'
+    import YoutubeViewer from './YoutubeViewer.svelte'
 
     export let domain
     export let hashtags
@@ -46,6 +48,10 @@
     let entriesPromise = new Promise(() => {})
     let selectedEntry = null
 
+    const selectEntry = entry => {
+        selectedEntry = entry
+    }
+
     onMount(() => {
         entriesPromise = fetchEntries(domain, hashtags)
 
@@ -89,4 +95,12 @@
                 "player queue"
         }
     }
+
+    .entry {
+        cursor: pointer;
+    }
+
+    .entry.active {
+        background-color: plum;
+    }
 </style>

src/YoutubeViewer.svelte

@@ -0,0 +1,37 @@
+<div>
+    <div bind:this={element}></div>
+</div>
+
+<script>
+    import { onMount } from 'svelte';
+    import YoutubePlayer from 'yt-player'
+
+    export let videoId
+
+    let element
+    let player
+
+    $: if (player && videoId) {
+        console.log(`loada ${videoId}`)
+        player.load(videoId, true)
+    }
+
+    onMount(() => {
+        player = new YoutubePlayer(element, {
+            width: 200,
+            height: 200,
+            autoplay: true,
+            controls: false, // debug only
+            keyboard: false,
+            fullscreen: false,
+            modestBranding: true,
+            related: false
+        })
+
+        player.on('ended', () => console.log('ended u should select next entry now uwu'))
+    })
+</script>
+
+<style>
+
+</style>

src/util.js

@@ -1,4 +1,5 @@
 import getUrls from 'get-urls'
+import getYoutubeId from 'get-youtube-id'
 
 export async function fetchEntries(domain, hashtags) {
     const response = await fetch(`https://${domain}/api/v1/timelines/tag/${hashtags[0]}`)
@@ -7,11 +8,16 @@ export async function fetchEntries(domain, hashtags) {
     const entries = statuses
         .map(status => {
             const [url] = Array.from(getUrls(status.content)).filter(isSupportedUrl)
-            const tags = intersection(status.tags.map(tag => tag.name), hashtags)
 
-            return { status, url, tags }
+            return { status, url }
         })
         .filter(entry => entry.url != null)
+        .map(({ status, url }) => {
+            const id = getYoutubeId(url)
+            const tags = intersection(status.tags.map(tag => tag.name), hashtags)
+
+            return { status, url, id, tags }
+        })
 
     return entries
 }