adjustments to user pages

ausspeedruns · Aug 6, 2023 · 62902bb · 62902bb
1 parent 2a48f41
commit 62902bb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 34 deletions.
diff --git a/apps/nextjs/components/RunCompleted/RunCompleted.tsx b/apps/nextjs/components/RunCompleted/RunCompleted.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React from "react";
 import Image from "next/image";
-import YouTubeVideoEmbed from '../YouTubeVideoEmbed/YouTubeVideoEmbed';
-import styles from './RunCompleted.module.scss';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTwitch } from '@fortawesome/free-brands-svg-icons';
+import YouTubeVideoEmbed from "../YouTubeVideoEmbed/YouTubeVideoEmbed";
+import styles from "./RunCompleted.module.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTwitch } from "@fortawesome/free-brands-svg-icons";
+import TwitchVideoEmbed from '../TwitchVideoEmbed/TwitchVideoEmbed';
 
 type Run = {
 	run: {
@@ -34,20 +35,21 @@ const RunCompleted = ({ run }: Run) => {
 	const aspectRatio = run.event.logo ? run.event.logo.width / run.event.logo.height : 0;
 
 	return (
-        <div className={styles.run}>
+		<div className={styles.run}>
 			<div key={run.id} className={styles.header}>
 				{run.event.logo && (
 					<div className={styles.logo}>
 						<Image
-                            src={run.event.logo.url}
-                            title={run.event.name}
-                            width={LOGO_HEIGHT * aspectRatio}
-                            height={LOGO_HEIGHT}
-                            alt={`${run.event.name} logo`}
-                            style={{
-                                maxWidth: "100%",
-                                height: "auto"
-                            }} />
+							src={run.event.logo.url}
+							title={run.event.name}
+							width={LOGO_HEIGHT * aspectRatio}
+							height={LOGO_HEIGHT}
+							alt={`${run.event.name} logo`}
+							style={{
+								maxWidth: "100%",
+								height: "auto",
+							}}
+						/>
 					</div>
 				)}
 				<div className={styles.runInfo}>
@@ -58,7 +60,7 @@ const RunCompleted = ({ run }: Run) => {
 						<span>{run.finalTime}</span>
 					</div>
 
-					{run.twitchVOD && (
+					{(run.twitchVOD && run.youtubeVOD) && (
 						<a className={styles.twitch} href={run.twitchVOD} target="_blank" rel="noreferrer">
 							<FontAwesomeIcon icon={faTwitch} />
 							Twitch VOD
@@ -67,12 +69,16 @@ const RunCompleted = ({ run }: Run) => {
 				</div>
 			</div>
 			{run.youtubeVOD ? (
-				<YouTubeVideoEmbed videoID={run.youtubeVOD.split('=')[1]} />
+				<YouTubeVideoEmbed videoID={run.youtubeVOD.split("=")[1]} />
 			) : (
-				<p>YouTube VOD to be uploaded soon!</p>
+				(run.twitchVOD && typeof window !== "undefined") ? (
+					<TwitchVideoEmbed video={run.twitchVOD.split("/")[4]} channel='' parent={window.location.hostname} />
+				) : (
+					<p style={{ textAlign: "center" }}>No VOD exists</p>
+				)
 			)}
 		</div>
-    );
+	);
 };
 
 export default RunCompleted;
diff --git a/apps/nextjs/components/TwitchVideoEmbed/TwitchVideoEmbed.tsx b/apps/nextjs/components/TwitchVideoEmbed/TwitchVideoEmbed.tsx
@@ -2,21 +2,28 @@ import React from "react";
 import styles from "./TwitchVideoEmbed.module.scss";
 
 type TwitchProps = {
-  channel: string;
-  parent: string;
-  muted?: boolean;
+	channel: string;
+	parent: string;
+	muted?: boolean;
+	video?: string;
 };
 
-const TwitchVideoEmbed = ({ channel, parent, muted = true }: TwitchProps) => {
-  return (
-    <div className={styles.twitchEmbed}>
-      <iframe
-        title="Ausspeedruns twitch player"
-        src={`https://player.twitch.tv/?channel=${channel}&parent=${parent}&muted=${muted}`}
-        allowFullScreen
-      ></iframe>
-    </div>
-  );
+const TwitchVideoEmbed = ({ channel, parent, muted = true, video }: TwitchProps) => {
+	let url = `https://player.twitch.tv/?channel=${channel}&parent=${parent}&muted=${muted}`;
+
+	if (video)
+	{
+		url = `https://player.twitch.tv/?video=${video}&parent=${parent}&muted=${muted}&autoplay=false`;
+	}
+
+	return (
+		<div className={styles.twitchEmbed}>
+			<iframe
+				title="Ausspeedruns twitch player"
+				src={url}
+				allowFullScreen></iframe>
+		</div>
+	);
 };
 
 export default TwitchVideoEmbed;
diff --git a/apps/nextjs/components/YouTubeVideoEmbed/YouTubeVideoEmbed.module.scss b/apps/nextjs/components/YouTubeVideoEmbed/YouTubeVideoEmbed.module.scss
@@ -8,7 +8,7 @@
 
   @include breakpoint($lg) {
     padding-top: calc(
-      (56.25% / 3) * 2
+      (56.25% / 2) * 2
     ); /* Half the screen width so half the height */
   }
 

diff --git a/apps/nextjs/pages/volunteers.tsx b/apps/nextjs/pages/volunteers.tsx
@@ -264,7 +264,7 @@ export default function SubmitGamePage() {
 				<DiscordEmbed
 					title={TITLE}
 					description="Volunteer for AusSpeedrun Marathons!"
-					pageUrl="/submit-game"
+					pageUrl="/volunteers"
 				/>
 			</Head>
 			<main className={styles.content}>