add video session

src/app/components/Session.tsx

@@ -6,6 +6,7 @@ interface SessionData
 {
 	profileIcon: string;
 	rankedIcon?: string;
+	rankedVideo?: string;
 	kills: string;
 	deaths: string;
 	assists: string;
@@ -45,18 +46,24 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
 		<div className="font-sans font-bold tracking-wide">
 			<div className="profile scaler-50 mx-[17rem] -mb-12 relative">
 				<div className="profile-picture w-64 h-64 floating-box relative">
-					<img
+					{ ( data.rankedIcon && data.rankedVideo ) && (
-						className="absolute inset-0 w-full h-full object-cover rounded-full scaler-75 mt-16"
+						<>
-						src={ data.profileIcon }
+							<video autoPlay muted loop
-						alt="Summoner Icon"
+								className="absolute inset-0 w-full h-full object-cover scaler-200"
-					/>
+								src={ data.rankedVideo }>
-					{ data.rankedIcon && (
+							</video>
 							<img
 								className="absolute inset-0 w-full h-full object-cover scaler-200"
 								src={ data.rankedIcon }
 								alt="Ranked Icon"
 							/>
+						</>
 					) }
+					<img
+						className="absolute inset-0 w-full h-full object-cover rounded-full scaler-70 mt-16"
+						src={ data.profileIcon }
+						alt="Summoner Icon"
+					/>
 				</div>
 			</div>
 

src/app/globals.css

@@ -75,6 +75,10 @@ body {
 	transform: scale(0.75);
 }
 
+.scaler-70 {
+	transform: scale(0.7);
+}
+
 .scaler-50 {
 	transform: scale(0.5);
 }

src/app/lib/utils.ts

@@ -42,6 +42,11 @@ export function getRankedIcon ( rankedTier: string )
 	return `https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/ranked-emblem/wings/wings_${ rankedTier.toLowerCase() }.png`;
 }
 
+export function getRankedVideo ( rankedTier: string )
+{
+	return `https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/videos/ranked/emblem-wings-magic-${ rankedTier.toLowerCase() }.webm`;
+}
+
 export function getCountryFlag ( countryCode: string )
 {
 	return `https://flagcdn.com/160x120/${ countryCode.toLowerCase() }.png`;
@@ -251,6 +256,7 @@ export async function getSessionData ( name: string, tag: string )
 	return {
 		profileIcon: getSummonerIcon( summoner.profileIconId ),
 		rankedIcon: getRankedIcon( rankedStats.tier ),
+		rankedVideo: getRankedVideo( rankedStats.tier ),
 		kills: avgKills,
 		deaths: avgDeaths,
 		assists: avgAssists,