From 51a12dc9058d01a0c4cf192b88433cacdfcf0214 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 17 May 2022 15:28:56 -0700
Subject: [PATCH] Fix logo to support non-square sizes

---
 web/components/ui/Content/Content.tsx   |  2 +-
 web/components/ui/Logo/Logo.module.scss | 22 +++++++++++++++++++++-
 web/components/ui/Logo/Logo.tsx         | 14 ++++++++++++--
 web/stories/HeaderLogo.stories.tsx      | 23 +++++++++++++++++++++++
 web/stories/PageLogo.stories.tsx        | 23 ++++++++++++++---------
 5 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 web/stories/HeaderLogo.stories.tsx

diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 19cd30daa..af854917c 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/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>
diff --git a/web/components/ui/Logo/Logo.module.scss b/web/components/ui/Logo/Logo.module.scss
index 9c062eed7..5e16c4d4e 100644
--- a/web/components/ui/Logo/Logo.module.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/web/components/ui/Logo/Logo.tsx b/web/components/ui/Logo/Logo.tsx
index 3a3e9f707..bb9d36c17 100644
--- a/web/components/ui/Logo/Logo.tsx
+++ b/web/components/ui/Logo/Logo.tsx
@@ -1,5 +1,15 @@
 import s from './Logo.module.scss';
 
-export default function SocialLinks() {
-  return <img className={s.logo} src="/logo" alt="logo" />;
+interface Props {
+  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>
+  );
 }
diff --git a/web/stories/HeaderLogo.stories.tsx b/web/stories/HeaderLogo.stories.tsx
new file mode 100644
index 000000000..88b03c91b
--- /dev/null
+++ b/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',
+};
diff --git a/web/stories/PageLogo.stories.tsx b/web/stories/PageLogo.stories.tsx
index 4eb8624c6..923d39a28 100644
--- a/web/stories/PageLogo.stories.tsx
+++ b/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',
-  component: OwncastLogo,
+  title: 'owncast/Components/Page Logo',
+  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({});
-Logo.args = {
-  url: '/logo',
+export const LocalServer = Template.bind({});
+LocalServer.args = {
+  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',
 };