Fix logo to support non-square sizes

web/components/ui/Content/Content.tsx

@@ -83,7 +83,7 @@ export default function ContentComponent() {
         </ActionButtonRow>
 
         <div className={`${s.lowerRow}`}>
-          <ServerLogo />
+          <ServerLogo src="/logo" />
           <Title level={2}>{name}</Title>
           {online && title !== '' && <Title level={3}>{title}</Title>}
           <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>

web/components/ui/Logo/Logo.module.scss

@@ -1,9 +1,29 @@
 .logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   width: 120px;
+  height: 120px;
   border-radius: 50%;
   border-width: 3px;
   border-style: solid;
   border-color: var(--theme-primary-color);
   background-color: var(--theme-background-secondary);
-  padding: 3px;
+}
+
+.container {  
+  width: 90%;
+  height: 90%;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
 }

web/components/ui/Logo/Logo.tsx

@@ -1,5 +1,15 @@
 import s from './Logo.module.scss';
 
-export default function SocialLinks() {
+interface Props {
-  return <img className={s.logo} src="/logo" alt="logo" />;
+  src: string;
+}
+
+export default function Logo({ src }: Props) {
+  return (
+    <div className={s.logo}>
+      <div className={s.container}>
+        <div className={s.image} style={{ backgroundImage: `url(${src})` }} />
+      </div>
+    </div>
+  );
 }

web/stories/HeaderLogo.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { OwncastLogo } from '../components/common';
+
+export default {
+  title: 'owncast/Components/Header Logo',
+  component: OwncastLogo,
+  parameters: {},
+} as ComponentMeta<typeof OwncastLogo>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof OwncastLogo> = args => <OwncastLogo {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Logo = Template.bind({});
+Logo.args = {
+  url: '/logo',
+};
+
+export const DemoServer = Template.bind({});
+DemoServer.args = {
+  url: 'https://watch.owncast.online/logo',
+};

web/stories/PageLogo.stories.tsx

@@ -1,23 +1,28 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { OwncastLogo } from '../components/common';
+import Logo from '../components/ui/Logo/Logo';
 
 export default {
-  title: 'owncast/Components/Logo',
+  title: 'owncast/Components/Page Logo',
-  component: OwncastLogo,
+  component: Logo,
   parameters: {},
-} as ComponentMeta<typeof OwncastLogo>;
+} as ComponentMeta<typeof Logo>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof OwncastLogo> = args => <OwncastLogo {...args} />;
+const Template: ComponentStory<typeof Logo> = args => <Logo {...args} />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Logo = Template.bind({});
+export const LocalServer = Template.bind({});
-Logo.args = {
+LocalServer.args = {
-  url: '/logo',
+  src: 'http://localhost:8080/logo',
 };
 
 export const DemoServer = Template.bind({});
 DemoServer.args = {
-  url: 'https://watch.owncast.online/logo',
+  src: 'https://watch.owncast.online/logo',
+};
+
+export const RandomImage = Template.bind({});
+RandomImage.args = {
+  src: 'https://picsum.photos/600/500',
 };