mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 22:31:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Move socialIconsList to its own component

Browse source
This commit is contained in:
Jannik 2020-10-04 20:36:05 +02:00
parent d6dadcabf8
commit 4c02b6eea1
2 changed files with 25 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
webroot/js/app.js
View file

@ -3,7 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
import { OwncastPlayer } from './components/player.js';
import SocialIcon from './components/social.js';
import SocialIconsList from './components/socialIconsList.js';
import UsernameForm from './components/chat/username.js';
import Chat from './components/chat/chat.js';
import Websocket from './utils/websocket.js';
@ -400,31 +400,6 @@ export default class App extends Component {
)
: null;
const socialIconsList = (function () {
if (socialHandles === null || socialHandles.length === 0) {
return null;
}
const list = socialHandles.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>
`;
})();
const mainClass = playerActive ? 'online' : '';
const streamInfoClass = streamOnline ? 'online' : ''; // need?
@ -532,7 +507,7 @@ export default class App extends Component {
>${streamerName}</span
>
</h2>
${socialIconsList}
<${SocialIconsList} handles=${socialHandles} />
<div
id="stream-summary"
class="stream-summary my-4"

25
webroot/js/components/social.js → webroot/js/components/socialIconsList.js
View file

@ -1,10 +1,11 @@
import { h } from 'https://unpkg.com/preact?module';
import { h, Component } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
import { SOCIAL_PLATFORMS } from '../utils/social.js';
import { classNames } from '../utils/helpers.js';
export default function SocialIcon(props) {
function SocialIcon(props) {
const { platform, url } = props;
const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
const inList = !!platformInfo;
@ -40,3 +41,23 @@ export default function SocialIcon(props) {
</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>`;
}