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>
2020-11-17 15:12:54 -08:00 · 2020-11-17 15:12:54 -08:00 · 01f16aeddf
commit 01f16aeddf
parent 1c753b2606
12 changed files with 37 additions and 47 deletions
--- a/config-example.yaml
+++ b/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:
-    small: /img/logo.svg
-    large: /img/logo.svg
+  logo: /img/logo.svg

  tags:
    - music
--- a/config/config.go
+++ b/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"`
-	Title            string         `yaml:"title" json:"title"`
-	Summary          string         `yaml:"summary" json:"summary"`
-	Logo             logo           `yaml:"logo" json:"logo"`
+	Name    string `yaml:"name" json:"name"`
+	Title   string `yaml:"title" json:"title"`
+	Summary string `yaml:"summary" json:"summary"`
+	// 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 {
-	Large string `yaml:"large" json:"large"`
-	Small string `yaml:"small" json:"small"`
-}
+// type logo struct {
+// 	Large string `yaml:"large" json:"large"`
+// 	Small string `yaml:"small" json:"small"`
+// }

 type socialHandle struct {
 	Platform string `yaml:"platform" json:"platform"`
--- a/controllers/index.go
+++ b/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)
 	}
--- a/core/core.go
+++ b/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)
 	}
--- a/doc/api/index.html
+++ b/doc/api/index.html
--- a/openapi.yaml
+++ b/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
-          properties:
-            large:
-              type: string
-            small:
-              type: string
+          type: string
+          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.
        tags:
          type: array
          description: Categories of the content this instance focuses on.
--- a/webroot/js/app-video-only.js
+++ b/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`
--- a/webroot/js/app.js
+++ b/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"
--- a/webroot/js/utils/constants.js
+++ b/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.';

--- a/webroot/styles/app.css
+++ b/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 {
--- a/webroot/styles/user-content.css
+++ b/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 {
--- a/yp/api.go
+++ b/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,