Update stuff and inline player
This commit is contained in:
parent
63c6e86900
commit
e4f2dcfb49
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
20
package.json
20
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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
/*
|
||||
|
|
|
|||
69
src/components/global/InlinePlayer.astro
Normal file
69
src/components/global/InlinePlayer.astro
Normal 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>
|
||||
|
|
@ -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';
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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}/>
|
||||
|
|
|
|||
|
|
@ -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%;"
|
||||
|
|
|
|||
|
|
@ -33,4 +33,5 @@ body {
|
|||
|
||||
.content {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 260px;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
|
|
|
|||
Reference in a new issue