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>

config-example.yaml

@@ -5,9 +5,7 @@ instanceDetails:
   title: Owncast
   summary: "This is brief summary of whom you are or what your stream is. You can read more about it at owncast.online.  You can edit this description in your config file."
 
-  logo:
+  logo: /img/logo.svg
-    small: /img/logo.svg
-    large: /img/logo.svg
 
   tags:
     - music

config/config.go

@@ -32,10 +32,11 @@ type config struct {
 
 // InstanceDetails defines the user-visible information about this particular instance.
 type InstanceDetails struct {
-	Name             string         `yaml:"name" json:"name"`
+	Name    string `yaml:"name" json:"name"`
-	Title            string         `yaml:"title" json:"title"`
+	Title   string `yaml:"title" json:"title"`
-	Summary          string         `yaml:"summary" json:"summary"`
+	Summary string `yaml:"summary" json:"summary"`
-	Logo             logo           `yaml:"logo" json:"logo"`
+	// Logo             logo           `yaml:"logo" json:"logo"`
+	Logo             string         `yaml:"logo" json:"logo"`
 	Tags             []string       `yaml:"tags" json:"tags"`
 	SocialHandles    []socialHandle `yaml:"socialHandles" json:"socialHandles"`
 	Version          string         `json:"version"`
@@ -43,10 +44,10 @@ type InstanceDetails struct {
 	ExtraPageContent string         `json:"extraPageContent"`
 }
 
-type logo struct {
+// type logo struct {
-	Large string `yaml:"large" json:"large"`
+// 	Large string `yaml:"large" json:"large"`
-	Small string `yaml:"small" json:"small"`
+// 	Small string `yaml:"small" json:"small"`
-}
+// }
 
 type socialHandle struct {
 	Platform string `yaml:"platform" json:"platform"`

controllers/index.go

@@ -62,7 +62,7 @@ func handleScraperMetadataPage(w http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		log.Panicln(err)
 	}
-	imageURL, err := url.Parse(fmt.Sprintf("http://%s%s", r.Host, config.Config.InstanceDetails.Logo.Large))
+	imageURL, err := url.Parse(fmt.Sprintf("http://%s%s", r.Host, config.Config.InstanceDetails.Logo))
 	if err != nil {
 		log.Panicln(err)
 	}

core/core.go

@@ -99,7 +99,7 @@ func transitionToOfflineVideoStreamContent() {
 	_transcoder.Start()
 
 	// Copy the logo to be the thumbnail
-	err := utils.Copy(filepath.Join("webroot", config.Config.InstanceDetails.Logo.Large), "webroot/thumbnail.jpg")
+	err := utils.Copy(filepath.Join("webroot", config.Config.InstanceDetails.Logo), "webroot/thumbnail.jpg")
 	if err != nil {
 		log.Warnln(err)
 	}
@@ -153,7 +153,7 @@ func resetDirectories() {
 	}
 
 	// Remove the previous thumbnail
-	err = utils.Copy(path.Join(config.WebRoot, config.Config.InstanceDetails.Logo.Large), "webroot/thumbnail.jpg")
+	err = utils.Copy(path.Join(config.WebRoot, config.Config.InstanceDetails.Logo), "webroot/thumbnail.jpg")
 	if err != nil {
 		log.Warnln(err)
 	}

openapi.yaml

@@ -98,12 +98,8 @@ components:
           type: string
           description: This is brief summary of whom you are or what the stream is.
         logo:
-          type: object
+          type: string
-          properties:
+          description: Local file name of your logo image. We recommend a square image (150 x 150px) with ample padding around the important contents of the image, as it will be rendered as a circle.
-            large:
-              type: string
-            small:
-              type: string
         tags:
           type: array
           description: Categories of the content this instance focuses on.

webroot/js/app-video-only.js

@@ -215,16 +215,13 @@ export default class VideoOnly extends Component {
       isPlaying,
     } = state;
 
-    const {
+    const { logo = TEMP_IMAGE } = configData;
-      logo = {},
-    } = configData;
-    const { large: largeLogo = TEMP_IMAGE } = logo;
     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,
+    const bgUserLogo = { backgroundImage: `url(${logo})` };
-      large: largeLogo = TEMP_IMAGE,
-    } = logo;
-
-    const bgLogo = { backgroundImage: `url(${smallLogo})` };
-    const bgLogoLarge = {
-      backgroundImage: `url(${largeLogo})`,
-      backgroundSize: 'contain',
-    };
 
     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"
+                class="inline-block	rounded-full bg-white w-8 min-w-8 min-h-8 h-8 mr-2 bg-no-repeat bg-center"
-                style=${bgLogo}
               >
-                <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 {

yp/api.go

@@ -30,7 +30,7 @@ func GetYPResponse(w http.ResponseWriter, r *http.Request) {
 	response := ypDetailsResponse{
 		Name:                  config.Config.InstanceDetails.Name,
 		Description:           config.Config.InstanceDetails.Summary,
-		Logo:                  config.Config.InstanceDetails.Logo.Large,
+		Logo:                  config.Config.InstanceDetails.Logo,
 		NSFW:                  config.Config.InstanceDetails.NSFW,
 		Tags:                  config.Config.InstanceDetails.Tags,
 		Online:                status.Online,