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>
This commit is contained in:
gingervitis 2020-11-17 15:12:54 -08:00 committed by GitHub
parent 1c753b2606
commit 01f16aeddf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 37 additions and 47 deletions

View file

@ -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

View file

@ -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"`

View file

@ -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)
}

View file

@ -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)
}

File diff suppressed because one or more lines are too long

View file

@ -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.

View file

@ -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`

View file

@ -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"

View file

@ -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.';

View file

@ -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 {

View file

@ -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 {

View file

@ -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,