Skip to content
Snippets Groups Projects
Verified Commit e90a9b34 authored by Dorian Koch's avatar Dorian Koch
Browse files

add meta tags to player page

parent 969163ca
No related branches found
No related tags found
1 merge request!15Add meta tag and add commit tag to gitlab pipeline
Pipeline #6152 passed
...@@ -30,6 +30,7 @@ import { PlayerData } from "@/pages/dynamic_player"; ...@@ -30,6 +30,7 @@ import { PlayerData } from "@/pages/dynamic_player";
import { useLanguage } from "./LanguageProvider"; import { useLanguage } from "./LanguageProvider";
import { StylizedText } from "./StylizedText"; import { StylizedText } from "./StylizedText";
import { ApiError } from "@/api/ApiError"; import { ApiError } from "@/api/ApiError";
import Head from "next/head";
function VideoPlayer({ lecture, className }: { lecture: lecture; className?: string }) { function VideoPlayer({ lecture, className }: { lecture: lecture; className?: string }) {
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
...@@ -610,6 +611,7 @@ export function EmbeddedPlayer({ playerData }: { playerData: ResourceType<Player ...@@ -610,6 +611,7 @@ export function EmbeddedPlayer({ playerData }: { playerData: ResourceType<Player
export default function Player({ playerData }: { playerData: ResourceType<PlayerData> }) { export default function Player({ playerData }: { playerData: ResourceType<PlayerData> }) {
const { course, lectureId, perms, loaderHadUserInfo } = playerData.read()!; const { course, lectureId, perms, loaderHadUserInfo } = playerData.read()!;
const api = useBackendContext();
const userContext = useUserContext(); const userContext = useUserContext();
const hasUserInfo = userContext.hasUserInfo(); const hasUserInfo = userContext.hasUserInfo();
const { language } = useLanguage(); const { language } = useLanguage();
...@@ -773,6 +775,16 @@ export default function Player({ playerData }: { playerData: ResourceType<Player ...@@ -773,6 +775,16 @@ export default function Player({ playerData }: { playerData: ResourceType<Player
return ( 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}`} /> <Title title={`${course.short_name} - ${lecture.title}`} />
<div className="card"> <div className="card">
<div className="card-header d-flex"> <div className="card-header d-flex">
......
...@@ -22,6 +22,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -22,6 +22,7 @@ export default function App({ Component, pageProps }: AppProps) {
name="commit" name="commit"
content={process.env.NEXT_PUBLIC_GIT_COMMIT_HASH ?? "unknown"} content={process.env.NEXT_PUBLIC_GIT_COMMIT_HASH ?? "unknown"}
/> />
<meta name="og:site_name" content="VideoAG" />
</Head> </Head>
<Title title="Video AG" /> <Title title="Video AG" />
<ReloadBoundary <ReloadBoundary
......
...@@ -99,7 +99,8 @@ export function ActualRedirector() { ...@@ -99,7 +99,8 @@ export function ActualRedirector() {
} }
export default function DynamicPlayer() { 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); const [clientsideForcer, setClientsideForcer] = useState(false);
useEffect(() => { useEffect(() => {
setClientsideForcer(true); setClientsideForcer(true);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment