add archive permalink page

Author: mellowagain

main.go

@@ -116,6 +116,7 @@ func setupServer(address string, app *Application) {
 	r.HandleFunc("/", middleware.WrapHandler("/", http.HandlerFunc(serveIndex))).Methods("GET")
 	r.HandleFunc("/queue", middleware.WrapHandler("/queue", http.HandlerFunc(serveIndex))).Methods("GET")
 	r.HandleFunc("/history", middleware.WrapHandler("/history", http.HandlerFunc(serveIndex))).Methods("GET")
+	r.HandleFunc("/archive/{id}", middleware.WrapHandler("/archive/{id}", http.HandlerFunc(serveIndex))).Methods("GET")
 
 	// Static resources
 	fileServer := http.FileServer(http.Dir("./dist/assets"))

sitemap.go

@@ -76,7 +76,7 @@ func (app *Application) addVideosToSitemap(sm *stm.Sitemap) error {
 
 		// video download url
 		sm.Add(stm.URL{
-			"loc":        fmt.Sprintf("/api/download/%s/video", video.Id),
+			"loc":        fmt.Sprintf("/archive/%s", video.Id),
 			"changefreq": "yearly",
 			"priority":   "0.3",
 		})

src/App.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
     import "carbon-components-svelte/css/g100.css";
-    import VideoInput from "./lib/VideoInput.svelte";
-    import Logo from "./lib/Logo.svelte";
-    import Heading from "./lib/Heading.svelte";
     import Notifications from "./lib/Notifications.svelte";
     import Nav from "./lib/Nav.svelte";
-    import { Column, Content, Grid, Row } from "carbon-components-svelte";
+    import { Content, Grid } from "carbon-components-svelte";
     import { fade } from "svelte/transition";
-    import VideoEmbed from "./lib/VideoEmbed.svelte";
     import Queue from "./lib/Queue.svelte";
     import History from "./lib/History.svelte";
     import { currentPage, Page } from "./lib/app";
-    import Stats from "./lib/Stats.svelte";
+    import Video from "./lib/Video.svelte";
 </script>
 
 <Notifications />
@@ -21,17 +17,7 @@
     <Grid>
         <div transition:fade>
             {#if $currentPage === Page.Video}
-                <Row>
-                    <Column>
-                        <Heading />
-                        <Logo />
-                        <Stats />
-                    </Column>
-                    <Column>
-                        <VideoEmbed />
-                        <VideoInput />
-                    </Column>
-                </Row>
+                <Video />
             {:else if $currentPage === Page.Queue}
                 <Queue />
             {:else if $currentPage === Page.History}

src/lib/History.svelte

@@ -12,7 +12,7 @@
     import SkeletonVideoEntry from "./SkeletonVideoEntry.svelte";
     import type { HistoryResponse, VideoInfo } from "./video";
     import VideoEntry from "./VideoEntry.svelte";
-    import { onDestroy } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import type { SearchMetadata } from "./search";
     import { delay } from "./api.js";
     import { MeiliSearch, SearchResponse } from "meilisearch";
@@ -21,6 +21,9 @@
     let page = 1;
     let limit = 25;
 
+    $: title = "History - pomu.app";
+    let onlyOneForArchivePage = false;
+
     let searchValue = "";
     let lastSearch: SearchResponse<Partial<VideoInfo>> = null;
     $: offset = (page - 1) * limit;
@@ -73,11 +76,15 @@
             sort: ["scheduledStart:desc"],
             page: page,
             offset: offset,
-            hitsPerPage: limit,
+            hitsPerPage: onlyOneForArchivePage ? 1 : limit,
         }, {
             signal: abortController.signal
         });
 
+        if (onlyOneForArchivePage) {
+            onlyOneForArchivePage = false;
+        }
+
         // fix up download urls (as they are not populated, hence the `Partial` in `Partial<VideoInfo>`
         search.hits.forEach((part, index, array) => {
             array[index].downloadUrl = `/api/download/${part.id}/video`;
@@ -95,9 +102,33 @@
 
     onDestroy(() => abortController.abort());
 
+    if (window.location.pathname.startsWith("/archive/")) {
+        searchValue = window.location.pathname.substring("/archive/".length);
+
+        onMount(async () => {
+            let data = await requestMeilisearchData();
+
+            if (!data.enabled) {
+                return;
+            }
+
+            onlyOneForArchivePage = true;
+            let search = await startSearch();
+
+            if ((search.estimatedTotalHits ?? search.totalHits) >= 1) {
+                let hit = search.hits[0];
+                title = `${hit.title} by ${hit.channelName} - archived on pomu.app`;
+            }
+        });
+    }
+
     let history = requestHistory();
 </script>
 
+<svelte:head>
+    <title>{title}</title>
+</svelte:head>
+
 <Grid>
     <Row>
         <Column>

src/lib/Nav.svelte

@@ -24,7 +24,13 @@
                 history.pushState({currentPage: value}, "", `${window.location.origin}/queue`);
                 break;
             case Page.History:
-                history.pushState({currentPage: value}, "", `${window.location.origin}/history`);
+                if (window.location.pathname.startsWith("/archive/")) {
+                    const videoId = window.location.pathname.split("/")[2];
+                    history.pushState({currentPage: value}, "", `${window.location.origin}/archive/${videoId}`);
+                } else {
+                    history.pushState({currentPage: value}, "", `${window.location.origin}/history`);
+                }
+
                 break;
             default:
                 // TODO: Display 404

src/lib/Queue.svelte

@@ -38,6 +38,10 @@
     let queue = requestQueue();
 </script>
 
+<svelte:head>
+    <title>Queue - pomu.app</title>
+</svelte:head>
+
 <Row>
     <h1>
         Queue

src/lib/Video.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import VideoEmbed from "./VideoEmbed.svelte";
+    import Logo from "./Logo.svelte";
+    import VideoInput from "./VideoInput.svelte";
+    import Stats from "./Stats.svelte";
+    import Heading from "./Heading.svelte";
+    import { Column, Row } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+    <title>pomu.app</title>
+</svelte:head>
+
+<Row>
+    <Column>
+        <Heading />
+        <Logo />
+        <Stats />
+    </Column>
+    <Column>
+        <VideoEmbed />
+        <VideoInput />
+    </Column>
+</Row>

src/lib/VideoEntry.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {
         Button,
-        Column,
+        Column, CopyButton,
         ImageLoader,
         InlineNotification,
         Link,
@@ -28,6 +28,7 @@
     import VideoLog from "./VideoLog.svelte";
     import type { User } from "./api";
     import { SearchMetadata } from "./search";
+    import { showNotification } from "./notifications";
 
     export let info: VideoInfo;
 
@@ -101,6 +102,17 @@
         return results;
     }
 
+    function copyArchiveToClipboard() {
+        navigator.clipboard.writeText(`${window.location.origin}/archive/${info.id}`);
+
+        showNotification({
+            title: "Copied permalink to clipboard",
+            description: "",
+            timeout: 5000,
+            kind: "success"
+        });
+    }
+
     let submittersModal = false;
 </script>
 
@@ -115,6 +127,11 @@
             <Link href="https://youtu.be/{info.id}" target="_blank">
                 <h4>{info.title}</h4>
             </Link>
+
+            <copy-container>
+                <h4 on:click={copyArchiveToClipboard}>#</h4>
+            </copy-container>
+
             <br />
             <h5>
                 <OutboundLink
@@ -235,4 +252,16 @@
     buttons {
         display: block;
     }
+
+    copy-container {
+        color: gray;
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    copy-container:hover {
+        color: white;
+    }
 </style>

src/lib/app.ts

@@ -16,7 +16,12 @@ switch (window.location.pathname) {
         currentOpenedPage = Page.History;
         break;
     default:
-        currentOpenedPage = Page.Video;
+        if (window.location.pathname.startsWith("/archive/")) {
+            currentOpenedPage = Page.History;
+        } else {
+            currentOpenedPage = Page.Video;
+        }
+
         break;
 }