Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #219 from jeyemwey/fix-issue-202

Browse Source 
Fix: Optional socialHandles and tags
This commit is contained in:
gingervitis 2020-10-07 01:06:57 -07:00 committed by GitHub
commit d500f32f5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
webroot/js/app.js
View File

@ -4,7 +4,7 @@ const html = htm.bind(h);
import showdown from '/js/web_modules/showdown.js'; import showdown from '/js/web_modules/showdown.js';
import { OwncastPlayer } from './components/player.js'; import { OwncastPlayer } from './components/player.js';
import SocialIcon from './components/social.js'; import SocialIconsList from './components/social-icons-list.js';
import UsernameForm from './components/chat/username.js'; import UsernameForm from './components/chat/username.js';
import Chat from './components/chat/chat.js'; import Chat from './components/chat/chat.js';
import Websocket from './utils/websocket.js'; import Websocket from './utils/websocket.js';
@ -388,9 +388,8 @@ export default class App extends Component {
const bgLogo = { backgroundImage: `url(${smallLogo})` }; const bgLogo = { backgroundImage: `url(${smallLogo})` };
const bgLogoLarge = { backgroundImage: `url(${largeLogo})` }; const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
const tagList = !tags.length const tagList = (tags !== null && tags.length > 0)
? null ? tags.map(
: tags.map(
(tag, index) => html` (tag, index) => html`
<li <li
key="tag${index}" key="tag${index}"
@ -399,17 +398,8 @@ export default class App extends Component {
${tag} ${tag}
</li> </li>
` `
); )
: null;
const socialIconsList = !socialHandles.length
? null
: socialHandles.map(
(item, index) => html`
<li key="social${index}">
<${SocialIcon} platform=${item.platform} url=${item.url} />
</li>
`
);
const mainClass = playerActive ? 'online' : ''; const mainClass = playerActive ? 'online' : '';
const streamInfoClass = streamOnline ? 'online' : ''; // need? const streamInfoClass = streamOnline ? 'online' : ''; // need?
@ -518,15 +508,7 @@ export default class App extends Component {
>${streamerName}</span >${streamerName}</span
> >
</h2> </h2>
<ul <${SocialIconsList} handles=${socialHandles} />
id="social-list"
class="social-list flex flex-row items-center justify-start flex-wrap"
>
<span class="follow-label text-xs font-bold mr-2 uppercase"
>Follow me:
</span>
${socialIconsList}
</ul>
<div <div
id="stream-summary" id="stream-summary"
class="stream-summary my-4" class="stream-summary my-4"

25
webroot/js/components/social.js → webroot/js/components/social-icons-list.js
View File

@ -1,10 +1,11 @@
import { h } from '/js/web_modules/preact.js'; import { h, Component } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js'; import htm from '/js/web_modules/htm.js';
const html = htm.bind(h); const html = htm.bind(h);
import { SOCIAL_PLATFORMS } from '../utils/social.js'; import { SOCIAL_PLATFORMS } from '../utils/social.js';
import { classNames } from '../utils/helpers.js'; import { classNames } from '../utils/helpers.js';
export default function SocialIcon(props) { function SocialIcon(props) {
const { platform, url } = props; const { platform, url } = props;
const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()]; const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
const inList = !!platformInfo; const inList = !!platformInfo;
@ -40,3 +41,23 @@ export default function SocialIcon(props) {
</a> </a>
`); `);
} }
export default function (props) {
const { handles } = props;
if (handles == null) {
return null;
}
const list = handles.map((item, index) => html`
<li key="social${index}">
<${SocialIcon} platform=${item.platform} url=${item.url} />
</li>
`);
return html`<ul
id="social-list"
class="social-list flex flex-row items-center justify-start flex-wrap">
<span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
${list}
</ul>`;
}