Simplify Logo requirement from users. (#373)

* Simplify Logo requirement from users.
- Only require 1 logo file, instead of a `small` and `large` one.  Just require `logo`.
- Update frontend sso that primary header logo will ALWAYS be owncast logo.
- User's logo will remain in "user content" area.

* Commit updated API documentation

Co-authored-by: Owncast <owncast@owncast.online>

webroot/js/app-video-only.js

@@ -215,16 +215,13 @@ export default class VideoOnly extends Component {
       isPlaying,
     } = state;
 
-    const {
-      logo = {},
-    } = configData;
-    const { large: largeLogo = TEMP_IMAGE } = logo;
+    const { logo = TEMP_IMAGE } = configData;
     const streamInfoClass = streamOnline ? 'online' : ''; // need?
 
     const mainClass = playerActive ? 'online' : '';
 
     const poster = isPlaying ? null : html`
-      <${VideoPoster} offlineImage=${largeLogo} active=${streamOnline} />
+      <${VideoPoster} offlineImage=${logo} active=${streamOnline} />
     `;
     return (
       html`

webroot/js/app.js

@@ -26,6 +26,8 @@ import {
   KEY_USERNAME,
   MESSAGE_OFFLINE,
   MESSAGE_ONLINE,
+  ORIENTATION_PORTRAIT,
+  OWNCAST_LOGO_LOCAL,
   TEMP_IMAGE,
   TIMER_DISABLE_CHAT_AFTER_OFFLINE,
   TIMER_STATUS_UPDATE,
@@ -34,7 +36,6 @@ import {
   URL_OWNCAST,
   URL_STATUS,
   WIDTH_SINGLE_COL,
-  ORIENTATION_PORTRAIT,
 } from './utils/constants.js';
 
 export default class App extends Component {
@@ -335,7 +336,7 @@ export default class App extends Component {
 
     const {
       version: appVersion,
-      logo = {},
+      logo = TEMP_IMAGE,
       socialHandles = [],
       name: streamerName,
       summary,
@@ -343,16 +344,8 @@ export default class App extends Component {
       title,
       extraPageContent,
     } = configData;
-    const {
-      small: smallLogo = TEMP_IMAGE,
-      large: largeLogo = TEMP_IMAGE,
-    } = logo;
 
-    const bgLogo = { backgroundImage: `url(${smallLogo})` };
-    const bgLogoLarge = {
-      backgroundImage: `url(${largeLogo})`,
-      backgroundSize: 'contain',
-    };
+    const bgUserLogo = { backgroundImage: `url(${logo})` };
 
     const tagList = (tags !== null && tags.length > 0)
       ? tags.map(
@@ -383,7 +376,7 @@ export default class App extends Component {
     });
 
     const poster = isPlaying ? null : html`
-      <${VideoPoster} offlineImage=${largeLogo} active=${streamOnline} />
+      <${VideoPoster} offlineImage=${logo} active=${streamOnline} />
     `;
 
     return html`
@@ -400,10 +393,9 @@ export default class App extends Component {
             >
               <span
                 id="logo-container"
-                class="inline-block	rounded-full bg-white w-8 min-w-8 min-h-8 h-8 p-1 mr-2 bg-no-repeat bg-center"
-                style=${bgLogo}
+                class="inline-block	rounded-full bg-white w-8 min-w-8 min-h-8 h-8 mr-2 bg-no-repeat bg-center"
               >
-                <img class="logo visually-hidden" src=${smallLogo} alt="" />
+                <img class="logo visually-hidden" src=${OWNCAST_LOGO_LOCAL} alt="owncast logo" />
               </span>
               <span class="instance-title overflow-hidden truncate"
                 >${title}</span
@@ -458,9 +450,9 @@ export default class App extends Component {
           <div class="user-content flex flex-row p-8">
             <div
               class="user-image rounded-full bg-white p-4 mr-8 bg-no-repeat bg-center"
-              style=${bgLogoLarge}
+              style=${bgUserLogo}
             >
-              <img class="logo visually-hidden" alt="Logo" src=${largeLogo} />
+              <img class="logo visually-hidden" alt="" src=${logo} />
             </div>
             <div
               class="user-content-header border-b border-gray-500 border-solid"

webroot/js/utils/constants.js

@@ -14,6 +14,8 @@ export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
 export const TIMER_STREAM_DURATION_COUNTER = 1000;
 export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 
+export const OWNCAST_LOGO_LOCAL = '/img/logo.svg';
+
 export const MESSAGE_OFFLINE = 'Stream is offline.';
 export const MESSAGE_ONLINE = 'Stream is online.';
 

webroot/styles/app.css

@@ -39,6 +39,7 @@ button[disabled] {
   pointer-events: none;
 }
 
+/* accessibility things */
 .visually-hidden {
   position: absolute !important;
   height: 1px;
@@ -58,6 +59,8 @@ header {
 
 #logo-container {
   background-size: 1.35em;
+  padding: 1.15rem;
+  background-image: url(/img/logo.svg);
 }
 
 #chat-toggle {

webroot/styles/user-content.css

@@ -3,7 +3,8 @@
   width: var(--user-image-width);
   height: var(--user-image-width);
   max-height: var(--user-image-width);
-  background-size: calc(var(--user-image-width));
+  /* background-size: calc(var(--user-image-width) - 2em); */
+  background-size: cover;
 }
 
 .user-social-item .platform-icon {