From e90a9b341187285a4ec991f84e9e1ca07aceefe5 Mon Sep 17 00:00:00 2001
From: Dorian Koch <doriank@fsmpi.rwth-aachen.de>
Date: Tue, 2 Jul 2024 17:29:41 +0200
Subject: [PATCH] add meta tags to player page
---
src/components/Player.tsx | 12 ++++++++++++
src/pages/_app.tsx | 1 +
src/pages/dynamic_player.tsx | 3 ++-
3 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 0d40e51..845b8cf 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -30,6 +30,7 @@ import { PlayerData } from "@/pages/dynamic_player";
import { useLanguage } from "./LanguageProvider";
import { StylizedText } from "./StylizedText";
import { ApiError } from "@/api/ApiError";
+import Head from "next/head";
function VideoPlayer({ lecture, className }: { lecture: lecture; className?: string }) {
const videoRef = useRef<HTMLVideoElement>(null);
@@ -610,6 +611,7 @@ export function EmbeddedPlayer({ playerData }: { playerData: ResourceType<Player
export default function Player({ playerData }: { playerData: ResourceType<PlayerData> }) {
const { course, lectureId, perms, loaderHadUserInfo } = playerData.read()!;
+ const api = useBackendContext();
const userContext = useUserContext();
const hasUserInfo = userContext.hasUserInfo();
const { language } = useLanguage();
@@ -773,6 +775,16 @@ export default function Player({ playerData }: { playerData: ResourceType<Player
return (
<>
+ <Head>
+ <meta property="og:title" content={`${course.short_name} - ${lecture.title}`} />
+ <meta property="og:description" content={course.description} />
+ <meta
+ property="og:image"
+ content={
+ lecture.thumbnail_url ?? `${api.assetUrl()}/thumbnail/l_${lecture.id}.jpg`
+ }
+ />
+ </Head>
<Title title={`${course.short_name} - ${lecture.title}`} />
<div className="card">
<div className="card-header d-flex">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 88928ba..feb4f4c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -22,6 +22,7 @@ export default function App({ Component, pageProps }: AppProps) {
name="commit"
content={process.env.NEXT_PUBLIC_GIT_COMMIT_HASH ?? "unknown"}
/>
+ <meta name="og:site_name" content="VideoAG" />
</Head>
<Title title="Video AG" />
<ReloadBoundary
diff --git a/src/pages/dynamic_player.tsx b/src/pages/dynamic_player.tsx
index e643274..50ebbda 100644
--- a/src/pages/dynamic_player.tsx
+++ b/src/pages/dynamic_player.tsx
@@ -99,7 +99,8 @@ export function ActualRedirector() {
}
export default function DynamicPlayer() {
- // The following is a hack to force nextjs to not pre-render this page at build time (which obv wouldnt make sense)
+ // The following is a hack to force nextjs to not pre-render this page at build time
+ // this needs to be done because it is not known which lecture is going to be watched (this is dynamic!)
const [clientsideForcer, setClientsideForcer] = useState(false);
useEffect(() => {
setClientsideForcer(true);
--
GitLab