1
0
Fork 0

Update stuff and inline player

This commit is contained in:
Korbs 2024-06-27 00:55:03 -04:00
parent 63c6e86900
commit e4f2dcfb49
No known key found for this signature in database
11 changed files with 103 additions and 34 deletions

View file

@ -4,7 +4,6 @@ import partytown from "@astrojs/partytown";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
import robotsTxt from "astro-robots-txt"; import robotsTxt from "astro-robots-txt";
import vue from "@astrojs/vue"; import vue from "@astrojs/vue";
import matomo from "astro-matomo";
import astroI18next from "astro-i18next"; import astroI18next from "astro-i18next";
export default defineConfig({ export default defineConfig({
@ -30,23 +29,11 @@ export default defineConfig({
partytown(), partytown(),
sitemap(), sitemap(),
robotsTxt(), robotsTxt(),
vue(), 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,
})
], ],
// Others // Others
devToolbar: {enabled: false}, devToolbar: {enabled: false},
experimental: { experimental: {
actions: true,
directRenderScript: true, directRenderScript: true,
}, },
}); });

BIN
bun.lockb

Binary file not shown.

View file

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

View file

@ -23,7 +23,7 @@ const ViewsConversion = Intl.NumberFormat('en', { notation: 'compact'})
const ViewsFormat = ViewsConversion.format(Views) 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"> <div class="video-item-thumbnail">
<img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/> <img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
</div> </div>

View file

@ -5,7 +5,17 @@ import { Trans, HeadHrefLangs } from "astro-i18next/components";
// Components // Components
import { Image } from 'astro:assets'; 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 // Images
import Poke from '@assets/poke-text.svg' import Poke from '@assets/poke-text.svg'
@ -39,6 +49,9 @@ import {
</div> </div>
</header> </header>
<!-- Don't use the Inline Player on video pages -->
{WatchPage ? null : <InlinePlayer/>}
<!-- Search Scripts --> <!-- Search Scripts -->
<script is:inline> <script is:inline>
/* /*

View file

@ -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>

View file

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

View file

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

View file

@ -5,19 +5,24 @@ import Base from "@layouts/Default.astro";
// Environment Variables // Environment Variables
const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
// Components
// Fetch // Fetch
const SWV = Astro.url.href.split("watch?v=").pop(); 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 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()); 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}> <Base Title={video.title}>
<video <video
class="inline-it"
autoplay autoplay
controls controls
transition:persist="poke-player"
poster={'https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'} poster={'https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
video-title={video.title} video-title={video.title}
style="width: 100%;" style="width: 100%;"

View file

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

View file

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