mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03:00
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:
parent
1c753b2606
commit
01f16aeddf
12 changed files with 37 additions and 47 deletions
|
@ -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
|
||||
|
|
|
@ -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"`
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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
|
@ -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.
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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.';
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue