Make editor logo changable

opencast · Apr 15, 2024 · 3b4ded2 · 3b4ded2
1 parent 9acd178
commit 3b4ded2
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 3 deletions.
diff --git a/public/editor-logo.svg b/public/editor-logo.svg
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
@@ -12,7 +12,7 @@ import { LuKeyboard } from "react-icons/lu";
 import { MainMenuStateNames } from "../types";
 import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from "../cssStyles";
 
-import LogoSvg from "../img/opencast-editor.svg?react";
+
 import { selectIsEnd } from "../redux/endSlice";
 import { checkboxMenuItem, HeaderMenuItemDef, ProtoButton, useColorScheme, WithHeaderMenu } from "@opencast/appkit";
 import { IconType } from "react-icons";
@@ -91,20 +91,50 @@ function Header() {
   );
 }
 
+const LogoPicture: React.FC = () => {
+  /*Should I import defines plugin, like it is in studio? How?*/
+  const path = (filename:string) => "/" + filename;
+
+  return (
+      <div>
+        <picture css={{
+          height: "100%",
+          display: "flex",
+          opacity: useColorScheme().scheme === "dark" ? 0.8 : 1.0,
+          paddingLeft: 8,
+          alignItems: "center",
+          "> *": {
+            height: "calc(100% - 0.5px)",
+          },
+        }}>
+          <source srcSet={path("editor-logo.svg")}></source>
+          <img src={path("editor-logo.svg")} alt="Opencast Editor Logo"/>
+        </picture>
+        ;
+      </div>
+  )
+}
+
 const Logo: React.FC = () => {
 
-  const { t } = useTranslation();
+  const {t } = useTranslation();
   const { scheme } = useColorScheme();
 
+
+
   const logo = css({
     paddingLeft: "8px",
     opacity: scheme === "dark" ? "0.8" : "1",
 
+    display: "flex",
+
     height: "100%",
     "> *": {
       height: "calc(100% - 12px)",
     },
 
+    alignItems: "center",
+
     // Unset a bunch of CSS to keep the logo clean
     outline: "unset",
     "&:hover": {
@@ -117,7 +147,7 @@ const Logo: React.FC = () => {
 
   return (
     <MainMenuButton
-      Icon={LogoSvg}
+      Icon={LogoPicture}
       stateName={MainMenuStateNames.cutting}
       bottomText={""}
       ariaLabelText={t("mainMenu.cutting-button")}