Auto-embed Youtube channel on user profile #624

server/user/user-profile.controller.ts

@@ -5,6 +5,7 @@ import entryService from "server/entry/entry.service";
 import highScoreService from "server/entry/highscore/highscore.service";
 import eventService from "server/event/event.service";
 import twitchService from "server/event/streamers/twitch.service";
+import youtubeService from "server/event/streamers/youtube.service";
 import likeService from "server/post/like/like.service";
 import postService from "server/post/post.service";
 import { CustomRequest, CustomResponse } from "server/types";
@@ -19,11 +20,12 @@ export async function userProfile(req: CustomRequest, res: CustomResponse<Common
     res.locals.pageTitle = profileUser.title;
     res.locals.pageDescription = forms.markdownToText(profileUser.details.body);
 
-    const [entries, posts, scores, isTwitchLive] = await Promise.all([
+    const [entries, posts, scores, isTwitchLive, isYoutubeLive] = await Promise.all([
       entryService.findUserEntries(profileUser),
       postService.findPosts({ userId: profileUser.id }),
       highScoreService.findUserScores(profileUser.id, { sortBy: "ranking" }),
-      twitchService.isLive(profileUser)
+      twitchService.isLive(profileUser),
+      youtubeService.isLive(profileUser)
     ]);
 
     const alakajamEntries = [];
@@ -41,6 +43,8 @@ export async function userProfile(req: CustomRequest, res: CustomResponse<Common
       }
     });
 
+    const liveYoutubeUrl = isYoutubeLive ? youtubeService.getEmbedUrl(profileUser) : undefined;
+
     res.render<CommonLocals>("user/user-profile", {
       ...res.locals,
       profileUser,
@@ -51,7 +55,8 @@ export async function userProfile(req: CustomRequest, res: CustomResponse<Common
       userScores: scores.models,
       medals: scores.countBy((userScore: BookshelfModel) => userScore.get("ranking")),
       userLikes: await likeService.findUserLikeInfo(posts.models as PostBookshelfModel[], res.locals.user),
-      isTwitchLive
+      isTwitchLive,
+      liveYoutubeUrl
     });
   } else {
     res.errorPage(404, "No user exists with name " + req.params.name);

server/user/user-profile.template.tsx

@@ -12,7 +12,8 @@ import * as postMacros from "server/post/post.macros";
 import * as userMacros from "server/user/user.macros";
 
 export default function render(context: CommonLocals): JSX.Element {
-  const { profileUser, user, isTwitchLive, alakajamEntries, externalEntries, otherEntries, posts, userScores, userLikes, medals } = context;
+  const { profileUser, user, isTwitchLive, liveYoutubeUrl, alakajamEntries, externalEntries, otherEntries,
+    posts, userScores, userLikes, medals } = context;
   const socialLinks: UserSocialLinks = profileUser.related("details").get("social_links") || {};
   const totalMedals = (medals[1] || 0) + (medals[2] || 0) + (medals[3] || 0);
   const hasAvatar = Boolean(profileUser.get("avatar"));
@@ -93,6 +94,12 @@ export default function render(context: CommonLocals): JSX.Element {
           </div>
         )}
 
+        {ifSet(liveYoutubeUrl, () =>
+          <div class="mb-3">
+            {userMacros.youtubeEmbed(liveYoutubeUrl, { height: 500 })}
+          </div>
+        )}
+
         {ifTrue(profileUser.related("details").get("body"), () =>
           <div>
             <h2>Bio</h2>

server/user/user.macros.tsx

@@ -98,6 +98,17 @@ export function twitchEmbed(twitchUsername: string, options: { height?: number;
   }
 }
 
+export function youtubeEmbed(src: string, options: { height?: number } = {}): JSX.Element {
+  return <iframe
+    width="100%"
+    height={options.height || 200}
+    src={src}
+    title="YouTube video player"
+    frameBorder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen></iframe>;
+}
+
 export function registerTwitchEmbedScripts(context: CommonLocals): void {
   context.scripts.push("https://embed.twitch.tv/embed/v1.js");
 }

types/preact/index.d.ts

@@ -4,6 +4,7 @@ declare module "preact" {
   namespace JSX {
     interface IntrinsicElements {
       ["jsx-wrapper"]: HTMLAttributes<HTMLElement>;
+      ["iframe"]: HTMLAttributes<HTMLElement>;
     }
 
     interface HTMLAttributes<RefType extends EventTarget = EventTarget>
@@ -36,6 +37,7 @@ declare module "preact" {
       enctype?: string;
       formnovalidate?: boolean;
       charset?: string;
+      allow?: string;
     }
   }
 }