diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 0d40e519106dc02adde0cac2f230d6042cf588ae..845b8cf06bb25b665a540f969d095cc0f2ea0b71 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 88928ba27a009f17fd986e8525f965733187aabe..feb4f4c7fd9aa318f109550543b88dcfe40ff84f 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 e64327472dce6e5195bd497f5b2af2bf07fcaaec..50ebbdabc8627d3c75e4bf6b60f9c9bb7830f2d4 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);