Update stuff and inline player

astro.config.mjs

@@ -4,7 +4,6 @@ import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import robotsTxt from "astro-robots-txt";
 import vue from "@astrojs/vue";
-import matomo from "astro-matomo";
 import astroI18next from "astro-i18next";
 
 export default defineConfig({
@@ -30,23 +29,11 @@ export default defineConfig({
     partytown(),
     sitemap(),
     robotsTxt(),
-    vue(),
-    matomo({
-      enabled: import.meta.env.PROD, // Only run Matomo in production
-      host: "#",
-      setCookieDomain: "#",
-      trackerUrl: "js/", // Defaults to matomo.php
-      srcUrl: "js/", // Defaults to matomo.js
-      siteId: 143,
-      heartBeatTimer: 5,
-      disableCookies: true,
-      debug: false,
-    })
+    vue()
   ],
   // Others
   devToolbar: {enabled: false},
   experimental: {
-    actions: true,
     directRenderScript: true,
   },
 });

package.json

@@ -5,7 +5,9 @@
   "license": "GPL-3.0-or-later",
   "scripts": {
     "start": "astro dev",
-    "build": "astro build"
+    "build": "astro build",
+    "translate": "astro-i18next generate",
+    "docker:build": "docker build -t poke ."
   },
   "repository": {
     "url": "https://codeberg.org/korbs/poke-but-in-astro"
@@ -13,33 +15,27 @@
   "keywords": [
     "poketube",
     "private",
+    "privacy",
     "ytdl",
-    "youtube"
+    "youtube",
+    "astro",
+    "frontend"
   ],
   "dependencies": {
     "@astrojs/node": "^8.3.1",
     "@astrojs/partytown": "^2.1.1",
-    "@astrojs/react": "^3.6.0",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/vue": "^4.5.0",
     "@fontsource-variable/roboto-flex": "^5.0.15",
     "@iconoir/vue": "^7.7.0",
-    "@innologica/vue-dropdown-menu": "^0.1.4",
-    "@shoelace-style/shoelace": "^2.15.1",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "astro": "^4.11.0",
+    "astro-analytics": "^2.7.0",
     "astro-i18next": "^1.0.0-beta.21",
-    "astro-matomo": "^1.6.0",
     "astro-robots-txt": "^1.0.0",
-    "iconoir-react": "^7.7.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "vue": "^3.4.29"
   },
   "devDependencies": {
     "@types/bun": "^1.1.5",
-    "accessible-astro-components": "^2.3.6",
     "sass": "^1.77.6"
   }
 }

src/components/common/VideoItem.astro

@@ -23,7 +23,7 @@ const ViewsConversion = Intl.NumberFormat('en', { notation: 'compact'})
 const ViewsFormat = ViewsConversion.format(Views)
 ---
 
-<a href={'/watch?v=' + ID} class="video-item">
+<a href={'/watch?v=' + ID} class="video-item" data-astro-reload>
     <div class="video-item-thumbnail">
         <img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
     </div>

src/components/global/Header.astro

@@ -5,7 +5,17 @@ import { Trans, HeadHrefLangs } from "astro-i18next/components";
 
 // Components
 import { Image } from 'astro:assets';
-import Dropdown from '@components/global/HeaderDropdown.astro'
+import Dropdown from '@components/global/HeaderDropdown.astro';
+import InlinePlayer from "./InlinePlayer.astro";
+
+// Check URL
+if (Astro.url.pathname.startsWith('/watch')) {
+  console.log('true')
+  var WatchPage = true
+} else {
+  console.log('false')
+  var WatchPage = false
+}
 
 // Images
 import Poke from '@assets/poke-text.svg'
@@ -39,6 +49,9 @@ import {
     </div>
 </header>
 
+<!-- Don't use the Inline Player on video pages -->
+{WatchPage ? null : <InlinePlayer/>}
+
 <!-- Search Scripts -->
 <script is:inline>
 /*    

src/components/global/InlinePlayer.astro

@@ -0,0 +1,69 @@
+---
+// Cookies
+var VideoId = Astro.cookies.get('InlinePlayerId').value
+
+// Icons
+import { OpenNewWindow, Xmark } from "@iconoir/vue";
+---
+
+<div class="inline-player">
+    <div class="inline-player-content">
+        <div class="inline-player-actions">
+            <a href={'/watch?v=' + VideoId}><OpenNewWindow/></a>
+            <button onclick="CloseInlinePlayer()"><Xmark/></button>
+        </div>
+        <video controls autoplay transition:persist="poke-player"></video>
+    </div>
+</div>
+
+<script is:inline>
+if(document.querySelector('.inline-player video').src === "") {
+    document.querySelector('.inline-player').style.display = 'none'
+} else {
+    null
+}
+
+function CloseInlinePlayer() {
+    document.querySelector('.inline-player video').src = 'null'
+    document.querySelector('.inline-player').style.display = 'none'
+}
+</script>
+
+<style is:global lang="scss">
+.inline-player {
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    z-index: 50;
+    margin: 32px;
+    width: 360px;
+    .inline-player-content {
+        padding: relative;
+        .inline-player-actions {
+            position: absolute;
+            right: 0px;
+            z-index: 15;
+            margin: 12px;
+            a, button {
+                color: white;
+                background: rgba(150,150,150,0.25);
+                border-radius: 3rem;
+                border: none;
+                aspect-ratio: 1;
+                cursor: pointer;
+                text-decoration: none;
+            }
+        }
+        video {
+            position: relative !important;
+            width: 100% !important;
+            height: 100% !important;
+            opacity: 1 !important;
+            z-index: 10 !important;
+            pointer-events: all !important;
+            object-fit: contain !important;
+            border-radius: 12px;
+        }
+    }
+}
+</style>

src/layouts/Default.astro

@@ -12,7 +12,6 @@ import Footer from '@components/global/Footer.astro'
 
 // Styles
 import '@styles/index.scss'
-import '@shoelace-style/shoelace/dist/themes/dark.css';
 import '@fontsource-variable/roboto-flex';
 ---
 

src/pages/search.astro

@@ -47,7 +47,7 @@ const TwitchData = await TwitchResponse.json()
     <p>Twitch Live streams with the tag "{Query}"</p>
     <div class="twitch-channels">
         {TwitchData.data.relatedChannels.map((channel) =>
-            <a href={'/channel/twitch/' + channel.username} class="channel-stream">
+            <a href={'/channel/twitch/' + channel.username} class="channel-stream" data-astro-reload
                 <img class="stream-preview" src={channel.stream.preview}/>
                 <div class="channel-info">
                     <img src={channel.pfp}/>

src/pages/watch.astro

@@ -5,19 +5,24 @@ import Base from "@layouts/Default.astro";
 // Environment Variables
 const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
 
-// Components
-
 // Fetch
 const SWV = Astro.url.href.split("watch?v=").pop();
 const video = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/videos/" + SWV).then((response) => response.json());
 const comments = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/comments/" + SWV).then((response) => response.json());
+
+// Set Cookies
+/// This is used for the "Link" button so users can return to the video
+Astro.cookies.set("InlinePlayerId", SWV, {
+    path: "/",
+    sameSite: "strict",
+});
 ---
 
 <Base Title={video.title}>
   <video
-    class="inline-it"
     autoplay
     controls
+    transition:persist="poke-player"
     poster={'https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
     video-title={video.title}
     style="width: 100%;"

src/styles/index.scss

@@ -33,4 +33,5 @@ body {
 
 .content {
     margin-top: 72px;
+    margin-bottom: 260px;
 }

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "astro/tsconfigs/base",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {