added videos to WelcomePageButtons

Author: lukaio3D

src/Assets/misc/WelcomeScreenButtonBackgrounds/AvatarCreatorButtonBackground.png

@@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next";
 import LogoutComponent from "~ReactComponents/WelcomePage/SignInAndOutComponent/LogoutComponent";
 import WelcomePageButton from "~ReactComponents/WelcomePage/WelcomePageButton/WelcomePageButtonView";
 import LMSButton from "~ReactComponents/WelcomePage/LMSButton/LMSButtonView";
+import learningWorldButtonBackgroundVideo from "../../../../../../Assets/misc/WelcomeScreenButtonBackgrounds/BackgroundVideoLernweltButton.mp4";
+import avatarEditorButtonBackgroundVideo from "../../../../../../Assets/misc/WelcomeScreenButtonBackgrounds/BackgroundVideoAvatarEditorButton.mp4";
 
 export default function WelcomePage() {
   const { t: translate } = useTranslation("start");
@@ -29,12 +31,12 @@ export default function WelcomePage() {
 
       <section className="flex items-center justify-around col-span-6 col-start-2 row-span-3 row-start-3 gap-4 mb-4 portrait:h-full portrait:flex-col portrait:row-start-3 portrait:row-span-3 portrait:col-start-2 portrait:gap-6">
         <WelcomePageButton
-          backgroundImage="!bg-learningworldbg"
+          backgroundVideo={learningWorldButtonBackgroundVideo}
           historyPath="/worldmenu"
           label={translate("learningWorldButton")}
         />
         <WelcomePageButton
-          backgroundImage="!bg-avatarcreatorbg"
+          backgroundVideo={avatarEditorButtonBackgroundVideo}
           historyPath="/avatarEditor"
           label={translate("avatarEditorButton")}
         />

src/Assets/misc/WelcomeScreenButtonBackgrounds/AvatarEditorButtonBackground.jpg

@@ -7,12 +7,12 @@ import useObservable from "~ReactComponents/ReactRelated/CustomHooks/useObservab
 import { useInjection } from "inversify-react";
 import IGetLoginStatusUseCase from "src/Components/Core/Application/UseCases/GetLoginStatus/IGetLoginStatusUseCase";
 import USECASE_TYPES from "~DependencyInjection/UseCases/USECASE_TYPES";
-import { useEffect } from "react";
 import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
 import tailwindMerge from "../../../Utils/TailwindMerge";
+import React, { useEffect, useRef } from "react";
 
 type WelcomePageButtonProps = {
-  backgroundImage: string;
+  backgroundVideo: string;
   historyPath: string;
   label: string;
 } & AdLerUIComponent;
@@ -29,29 +29,46 @@ export default function WelcomePageButton(props: WelcomePageButtonProps) {
     viewModel?.userLoggedIn,
   );
 
+  const videoRef = useRef<HTMLVideoElement>(null);
+
   useEffect(() => {
     setUserLoggedIn(getLoginStatusUseCase.execute().isLoggedIn);
   }, [getLoginStatusUseCase, setUserLoggedIn]);
 
   return (
     <StyledButton
       shape="freeFloatCenterNoPadding"
-      containerClassName=" w-full lg:w-1/2 h-full"
+      containerClassName="w-full lg:w-1/2 h-full"
       onClick={() => history.push(props.historyPath)}
       disabled={!userLoggedIn}
       className={tailwindMerge(
         `relative !px-0 !py-0 flex flex-col items-center justify-end !w-full !h-full col-span-3 col-start-6 bg-cover`,
-        props.backgroundImage,
+        props.backgroundVideo,
         props.className ?? "",
       )}
     >
-      {userLoggedIn && (
+      {userLoggedIn ? (
         <>
-          <div className="w-full h-full bg-black opacity-30 hover:opacity-20" />
-          <p className="absolute p-4 mx-auto text-2xl font-bold rounded-lg text-center bg-buttonbgblue lg:bottom-[42%] portrait:bottom-[20%] portrait:text-lg bottom-32 text-adlerdarkblue">
+          <video
+            ref={videoRef}
+            src={props.backgroundVideo}
+            onMouseEnter={() => videoRef.current?.play()}
+            onMouseLeave={() => videoRef.current?.pause()}
+            loop
+            className="w-full h-full object-cover"
+          ></video>
+          <p className="absolute p-4 mx-auto text-2xl font-bold rounded-lg text-center bg-buttonbgblue lg:bottom-[42%] portrait:bottom-[20%] portrait:text-lg bottom-32 text-adlerdarkblue ">
             {props.label}
           </p>
         </>
+      ) : (
+        <>
+          <video
+            ref={videoRef}
+            src={props.backgroundVideo}
+            className="w-full h-full object-cover grayscale"
+          ></video>
+        </>
       )}
     </StyledButton>
   );

src/Assets/misc/WelcomeScreenButtonBackgrounds/BackgroundVideoAvatarEditorButton.mp4

@@ -15,9 +15,9 @@ module.exports = {
     extend: {
       backgroundImage: {
         learningworldbg:
-          "url('/src/Assets/misc/WelcomeScreenButtonBackgrounds/LearningWorldButtonBackground.png')",
+          "url('/src/Assets/misc/WelcomeScreenButtonBackgrounds/LearningWorldButtonBackground.jpg')",
         avatarcreatorbg:
-          "url('/src/Assets/misc/WelcomeScreenButtonBackgrounds/AvatarCreatorButtonBackground.png')",
+          "url('/src/Assets/misc/WelcomeScreenButtonBackgrounds/AvatarEditorButtonBackground.jpg')",
       },
       keyframes: {
         wiggle: {