diff --git a/apps/client/src/common/components/view-logo/ViewLogo.tsx b/apps/client/src/common/components/view-logo/ViewLogo.tsx
new file mode 100644
index 000000000..1988d485f
--- /dev/null
+++ b/apps/client/src/common/components/view-logo/ViewLogo.tsx
@@ -0,0 +1,11 @@
+import { projectLogoPath } from '../../api/constants';
+
+interface ViewLogoProps {
+ name: string;
+ className: string;
+}
+
+export default function ViewLogo(props: ViewLogoProps) {
+ const { name, className } = props;
+ return ;
+}
diff --git a/apps/client/src/features/viewers/backstage/Backstage.scss b/apps/client/src/features/viewers/backstage/Backstage.scss
index 62fe19e1e..6b80a5fda 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.scss
+++ b/apps/client/src/features/viewers/backstage/Backstage.scss
@@ -29,6 +29,12 @@
font-size: clamp(32px, 4.5vw, 64px);
font-weight: 600;
display: flex;
+ gap: 1rem;
+ }
+
+ .logo {
+ max-width: min(200px, 20vw);
+ max-height: min(100px, 20vh);
}
.clock-container {
diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
index b75e10c92..f429e1844 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.tsx
+++ b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -10,6 +10,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
import TitleCard from '../../../common/components/title-card/TitleCard';
+import ViewLogo from '../../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
@@ -27,19 +28,19 @@ import './Backstage.scss';
export const MotionTitleCard = motion(TitleCard);
interface BackstageProps {
- customFields: CustomFields;
- isMirrored: boolean;
- eventNow: OntimeEvent | null;
- eventNext: OntimeEvent | null;
- time: ViewExtendedTimer;
backstageEvents: OntimeEvent[];
- selectedId: string | null;
+ customFields: CustomFields;
+ eventNext: OntimeEvent | null;
+ eventNow: OntimeEvent | null;
general: ProjectData;
+ isMirrored: boolean;
+ time: ViewExtendedTimer;
+ selectedId: string | null;
settings: Settings | undefined;
}
export default function Backstage(props: BackstageProps) {
- const { customFields, isMirrored, eventNow, eventNext, time, backstageEvents, selectedId, general, settings } = props;
+ const { backstageEvents, customFields, eventNext, eventNow, general, time, isMirrored, selectedId, settings } = props;
const { getLocalizedString } = useTranslation();
const [blinkClass, setBlinkClass] = useState(false);
@@ -81,6 +82,7 @@ export default function Backstage(props: BackstageProps) {