LogalDeveloper/owncast
0
Fork 0
Code Activity

preact app integration

Browse Source
This commit is contained in:
Ginger Wong
2020-08-20 15:29:15 -07:00
parent 3dc3e37751
commit c3adfe7b7b
8 changed files with 297 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webroot/index2.html
View File

@@ -30,6 +30,7 @@
<link href="./styles/layout.css" rel="stylesheet" /> <link href="./styles/layout.css" rel="stylesheet" />
<link href="./styles/chat.css" rel="stylesheet" /> <link href="./styles/chat.css" rel="stylesheet" />
<link href="./styles/user-content.css" rel="stylesheet" />
</head> </head>

304
webroot/js/app2.js
View File

@@ -3,11 +3,28 @@ import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h); const html = htm.bind(h);
import SocialIcon from './social.js';
import UsernameForm from './chat/username.js'; import UsernameForm from './chat/username.js';
import Chat from './chat/chat.js'; import Chat from './chat/chat.js';
import Websocket from './websocket.js'; import Websocket from './websocket.js';
import { OwncastPlayer } from './player.js';
import { getLocalStorage, generateAvatar, generateUsername, URL_OWNCAST, URL_CONFIG, URL_STATUS, addNewlines } from './utils.js'; import {
getLocalStorage,
generateAvatar,
generateUsername,
URL_OWNCAST,
URL_CONFIG,
URL_STATUS,
addNewlines,
pluralize,
TIMER_STATUS_UPDATE,
TIMER_DISABLE_CHAT_AFTER_OFFLINE,
TIMER_STREAM_DURATION_COUNTER,
TEMP_IMAGE,
MESSAGE_OFFLINE,
MESSAGE_ONLINE,
} from './utils.js';
import { KEY_USERNAME, KEY_AVATAR, } from './utils/chat.js'; import { KEY_USERNAME, KEY_AVATAR, } from './utils/chat.js';
export default class App extends Component { export default class App extends Component {
@@ -16,13 +33,22 @@ export default class App extends Component {
this.state = { this.state = {
websocket: new Websocket(), websocket: new Websocket(),
chatEnabled: true, // always true for standalone chat displayChat: false, // chat panel state
chatEnabled: false, // chat input box state
username: getLocalStorage(KEY_USERNAME) || generateUsername(), username: getLocalStorage(KEY_USERNAME) || generateUsername(),
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`), userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
streamStatus: null,
player: null,
configData: {}, configData: {},
extraUserContent: '',
playerActive: false, // player object is active
streamOnline: false, // stream is active/online
//status
streamStatusMessage: MESSAGE_OFFLINE,
viewerCount: '',
sessionMaxViewerCount: '',
overallMaxViewerCount: '',
}; };
// timers // timers
@@ -32,25 +58,48 @@ export default class App extends Component {
this.disableChatTimer = null; this.disableChatTimer = null;
this.streamDurationTimer = null; this.streamDurationTimer = null;
// misc dom events
this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this);
this.handleUsernameChange = this.handleUsernameChange.bind(this); this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handleOfflineMode = this.handleOfflineMode.bind(this);
this.handleOnlineMode = this.handleOnlineMode.bind(this);
this.disableChatInput = this.disableChatInput.bind(this);
// player events
this.handlePlayerReady = this.handlePlayerReady.bind(this);
this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
this.handlePlayerEnded = this.handlePlayerEnded.bind(this);
this.handlePlayerError = this.handlePlayerError.bind(this);
// fetch events
this.getConfig = this.getConfig.bind(this); this.getConfig = this.getConfig.bind(this);
this.getStreamStatus = this.getStreamStatus.bind(this); this.getStreamStatus = this.getStreamStatus.bind(this);
this.getExtraUserContent = this.getExtraUserContent.bind(this); this.getExtraUserContent = this.getExtraUserContent.bind(this);
} }
componentDidMount() { componentDidMount() {
this.getConfig(); this.getConfig();
// DO LATER.. this.player = new OwncastPlayer();
// this.player = new OwncastPlayer(); this.player.setupPlayerCallbacks({
// this.player.setupPlayerCallbacks({ onReady: this.handlePlayerReady,
// onReady: this.handlePlayerReady, onPlaying: this.handlePlayerPlaying,
// onPlaying: this.handlePlayerPlaying, onEnded: this.handlePlayerEnded,
// onEnded: this.handlePlayerEnded, onError: this.handlePlayerError,
// onError: this.handlePlayerError, });
// }); this.player.init();
// this.player.init(); }
componentWillUnmount() {
// clear all the timers
clearInterval(this.playerRestartTimer);
clearInterval(this.offlineTimer);
clearInterval(this.statusTimer);
clearTimeout(this.disableChatTimer);
clearInterval(this.streamDurationTimer);
} }
// fetch /config data // fetch /config data
@@ -98,8 +147,9 @@ export default class App extends Component {
return response.text(); return response.text();
}) })
.then(text => { .then(text => {
const descriptionHTML = new showdown.Converter().makeHtml(text); this.setState({
this.vueApp.extraUserContent = descriptionHTML; extraUserContent: new showdown.Converter().makeHtml(text),
});
}) })
.catch(error => { .catch(error => {
this.handleNetworkingError(`Fetch extra content: ${error}`); this.handleNetworkingError(`Fetch extra content: ${error}`);
@@ -128,66 +178,89 @@ export default class App extends Component {
if (!status) { if (!status) {
return; return;
} }
// update UI const {
this.vueApp.viewerCount = status.viewerCount; viewerCount,
this.vueApp.sessionMaxViewerCount = status.sessionMaxViewerCount; sessionMaxViewerCount,
this.vueApp.overallMaxViewerCount = status.overallMaxViewerCount; overallMaxViewerCount,
online,
} = status;
const { streamOnline: curStreamOnline } = this.state;
this.lastDisconnectTime = status.lastDisconnectTime; this.lastDisconnectTime = status.lastDisconnectTime;
if (!this.streamStatus) { if (status.online && !curStreamOnline) {
// display offline mode the first time we get status, and it's offline. // stream has just come online.
if (!status.online) { this.handleOnlineMode();
this.handleOfflineMode(); } else if (!status.online && curStreamOnline) {
} else { // stream has just flipped offline.
this.handleOnlineMode(); this.handleOfflineMode();
}
} else {
if (status.online && !this.streamStatus.online) {
// stream has just come online.
this.handleOnlineMode();
} else if (!status.online && this.streamStatus.online) {
// stream has just flipped offline.
this.handleOfflineMode();
}
} }
// keep a local copy
this.streamStatus = status;
if (status.online) { if (status.online) {
// only do this if video is paused, so no unnecessary img fetches // only do this if video is paused, so no unnecessary img fetches
if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) { if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
this.player.setPoster(); this.player.setPoster();
} }
} }
this.setState({
viewerCount,
sessionMaxViewerCount,
overallMaxViewerCount,
streamOnline: online,
});
}
// when videojs player is ready, start polling for stream
handlePlayerReady() {
this.getStreamStatus();
this.statusTimer = setInterval(this.getStreamStatus, TIMER_STATUS_UPDATE);
}
handlePlayerPlaying() {
// do something?
}
// likely called some time after stream status has gone offline.
// basically hide video and show underlying "poster"
handlePlayerEnded() {
this.setState({
playerActive: false,
});
}
handlePlayerError() {
// do something?
this.handleOfflineMode();
this.handlePlayerEnded();
} }
// stop status timer and disable chat after some time. // stop status timer and disable chat after some time.
handleOfflineMode() { handleOfflineMode() {
this.vueApp.isOnline = false;
clearInterval(this.streamDurationTimer); clearInterval(this.streamDurationTimer);
this.vueApp.streamStatus = MESSAGE_OFFLINE; const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
if (this.streamStatus) { const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime)); this.disableChatTimer = setTimeout(this.disableChatInput, countdown);
const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime; this.setState({
this.disableChatTimer = setTimeout(this.messagingInterface.disableChat, countdown); streamOnline: false,
} streamStatusMessage: MESSAGE_OFFLINE,
});
} }
// play video! // play video!
handleOnlineMode() { handleOnlineMode() {
this.vueApp.playerOn = true;
this.vueApp.isOnline = true;
this.vueApp.streamStatus = MESSAGE_ONLINE;
this.player.startPlayer(); this.player.startPlayer();
clearTimeout(this.disableChatTimer); clearTimeout(this.disableChatTimer);
this.disableChatTimer = null; this.disableChatTimer = null;
this.messagingInterface.enableChat();
this.streamDurationTimer = this.streamDurationTimer =
setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER); setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER);
this.setState({
playerActive: true,
streamOnline: true,
chatEnabled: true,
streamStatusMessage: MESSAGE_ONLINE,
});
} }
@@ -198,10 +271,16 @@ export default class App extends Component {
}); });
} }
handleChatToggle() { handleChatPanelToggle() {
const { chatEnabled: curChatEnabled } = this.state; const { displayChat: curDisplayed } = this.state;
this.setState({ this.setState({
chatEnabled: !curChatEnabled, displayChat: !curDisplayed,
});
}
disableChatInput() {
this.setState({
chatEnabled: false,
}); });
} }
@@ -210,49 +289,81 @@ export default class App extends Component {
} }
render(props, state) { render(props, state) {
const { username, userAvatarImage, websocket, configData } = state; const {
username,
userAvatarImage,
websocket,
configData,
extraUserContent,
displayChat,
viewerCount,
sessionMaxViewerCount,
overallMaxViewerCount,
playerActive,
streamOnline,
streamStatusMessage,
chatEnabled,
} = state;
const { const {
version: appVersion, version: appVersion,
logo = {}, logo = {},
socialHandles, socialHandles = [],
name: streamnerName, name: streamerName,
summary, summary,
tags, tags = [],
title, title,
} = configData; } = configData;
const { small: smallLogo, large: largeLogo } = logo; const { small: smallLogo = TEMP_IMAGE, large: largeLogo = TEMP_IMAGE } = logo;
const bgLogo = { backgroundImage: `url(${smallLogo})` }; const bgLogo = { backgroundImage: `url(${smallLogo})` };
const bgLogoLarge = { backgroundImage: `url(${largeLogo})` }; const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
// not needed for standalone, just messages only. remove later. const tagList = !tags.length ?
null :
tags.map((tag, index) => html`
<li key="tag${index}" class="tag rounded-sm text-gray-100 bg-gray-700">${tag}</li>
`);
const socialIconsList =
!socialHandles.length ?
null :
socialHandles.map((item, index) => html`
<li key="social${index}">
<${SocialIcon} platform=${item.platform} url=${item.url} />
</li>
`);
const chatClass = displayChat ? 'chat' : 'no-chat';
const mainClass = playerActive ? 'online' : '';
const streamInfoClass = streamOnline ? 'online' : '';
return ( return (
html` html`
<div id="app-container" class="flex chat"> <div id="app-container" class="flex ${chatClass}">
<div id="top-content"> <div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 v-cloak class="flex text-gray-400"> <h1 class="flex text-gray-400">
<span <span
id="logo-container" id="logo-container"
class="rounded-full bg-white px-1 py-1" class="rounded-full bg-white px-1 py-1"
style=${bgLogo} style=${bgLogo}
> >
<img class="logo visually-hidden" src=${smallLogo}> <img class="logo visually-hidden" src=${smallLogo} />
</span> </span>
<span class="instance-title">${title}</span> <span class="instance-title">${title}</span>
</h1> </h1>
<div id="user-options-container" class="flex">
<${UsernameForm} <${UsernameForm}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
handleUsernameChange=${this.handleUsernameChange} handleUsernameChange=${this.handleUsernameChange}
handleChatToggle=${this.handleChatToggle} />
/> <button type="button" id="chat-toggle" onClick=${this.handleChatPanelToggle} class="flex bg-gray-800 hover:bg-gray-700">💬</button>
</div>
</header> </header>
</div> </div>
<main> <main class=${mainClass}>
<div <div
id="video-container" id="video-container"
class="flex owncast-video-container bg-black" class="flex owncast-video-container bg-black"
@@ -269,23 +380,46 @@ export default class App extends Component {
</div> </div>
<section id="stream-info" aria-label="Stream status" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"> <section id="stream-info" aria-label="Stream status" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
<span>{{ streamStatus }}</span> <span>${streamStatusMessage}</span>
<span v-if="isOnline">{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span> <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
<span v-if="isOnline">Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span> <span>Max ${pluralize('viewer', sessionMaxViewerCount)}.</span>
<span v-if="isOnline">{{ overallMaxViewerCount }} overall.</span> <span>${overallMaxViewerCount} overall.</span>
</section> </section>
</main> </main>
<section id="user-content" aria-label="User information"> <section id="user-content" aria-label="User information">
<user-details <div class="user-content">
v-bind:logo="logo" <div
v-bind:platforms="socialHandles" class="user-image rounded-full bg-white"
v-bind:summary="summary" style=${bgLogoLarge}
v-bind:tags="tags" >
>{{streamerName}}</user-details> <img
class="logo visually-hidden"
<div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div> alt="Logo"
src=${largeLogo}
>
</div>
<div class="user-content-header border-b border-gray-500 border-solid">
<h2 class="font-semibold">
About
<span class="streamer-name text-indigo-600">${streamerName}</span>
</h2>
<ul class="social-list flex" v-if="this.platforms.length">
<span class="follow-label">Follow me: </span>
${socialIconsList}
</ul>
<div class="stream-summary" dangerouslySetInnerHTML=${{ __html: summary }}></div>
<ul class="tag-list flex">
${tagList}
</ul>
</div>
</div>
<div
id="extra-user-content"
class="extra-user-content"
dangerouslySetInnerHTML=${{ __html: extraUserContent }}
></div>
</section> </section>
<footer class="flex"> <footer class="flex">
@@ -300,7 +434,7 @@ export default class App extends Component {
websocket=${websocket} websocket=${websocket}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
chatEnabled chatEnabled=${chatEnabled}
/> />
</div> </div>

4
webroot/js/chat/chat-input.js
View File

@@ -240,8 +240,8 @@ export default class ChatInput extends Component {
<${ContentEditable} <${ContentEditable}
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
placeholderText=${placeholderText}
placeholderText=${placeholderText}
innerRef=${this.formMessageInput} innerRef=${this.formMessageInput}
html=${inputHTML} html=${inputHTML}
disabled=${!inputEnabled} disabled=${!inputEnabled}
@@ -251,7 +251,7 @@ export default class ChatInput extends Component {
onBlur=${this.handleMessageInputBlur} onBlur=${this.handleMessageInputBlur}
onPaste=${this.handlePaste} onPaste=${this.handlePaste}
/> />
<div id="message-form-actions" class="flex"> <div id="message-form-actions" class="flex">
<span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span> <span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>

2
webroot/js/chat/standalone.js
View File

@@ -48,7 +48,6 @@ export default class StandaloneChat extends Component {
websocket=${websocket} websocket=${websocket}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
chatEnabled
messagesOnly messagesOnly
/> />
`); `);
@@ -69,7 +68,6 @@ export default class StandaloneChat extends Component {
websocket=${websocket} websocket=${websocket}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
chatEnabled
/> />
</${Fragment}> </${Fragment}>
`); `);

53
webroot/js/chat/username.js
View File

@@ -59,7 +59,7 @@ export default class UsernameForm extends Component {
} }
render(props, state) { render(props, state) {
const { username, userAvatarImage, handleChatToggle } = props; const { username, userAvatarImage } = props;
const { displayForm } = state; const { displayForm } = state;
const narrowSpace = document.body.clientWidth < 640; const narrowSpace = document.body.clientWidth < 640;
@@ -76,34 +76,31 @@ export default class UsernameForm extends Component {
} }
return ( return (
html` html`
<div id="user-options-container" class="flex"> <div id="user-info">
<div id="user-info"> <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}>
<div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}> <img
<img src=${userAvatarImage}
src=${userAvatarImage} alt=""
alt="" id="username-avatar"
id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
/> <span id="username-display" class="text-indigo-600">${username}</span>
<span id="username-display" class="text-indigo-600">${username}</span> </div>
</div>
<div id="user-info-change" style=${styles.form}>
<div id="user-info-change" style=${styles.form}> <input type="text"
<input type="text" id="username-change-input"
id="username-change-input" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white" maxlength="100"
maxlength="100" placeholder="Update username"
placeholder="Update username" value=${username}
value=${username} onKeydown=${this.handleKeydown}
onKeydown=${this.handleKeydown} ref=${this.textInput}
ref=${this.textInput} />
/> <button id="button-update-username" onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-update-username" onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
<button id="button-cancel-change" onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
<button id="button-cancel-change" onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
</div>
</div> </div>
<button type="button" id="chat-toggle" onClick=${handleChatToggle} class="flex bg-gray-800 hover:bg-gray-700">💬</button>
</div> </div>
`); `);
} }

19
webroot/js/player.js
View File

@@ -17,7 +17,6 @@ const VIDEO_OPTIONS = {
vhs: { vhs: {
// used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default. // used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
enableLowInitialPlaylist: true, enableLowInitialPlaylist: true,
} }
}, },
liveTracker: { liveTracker: {
@@ -128,27 +127,25 @@ class OwncastPlayer {
if (window.WebKitPlaybackTargetAvailabilityEvent) { if (window.WebKitPlaybackTargetAvailabilityEvent) {
var videoJsButtonClass = videojs.getComponent('Button'); var videoJsButtonClass = videojs.getComponent('Button');
var concreteButtonClass = videojs.extend(videoJsButtonClass, { var concreteButtonClass = videojs.extend(videoJsButtonClass, {
// The `init()` method will also work for constructor logic here, but it is // The `init()` method will also work for constructor logic here, but it is
// deprecated. If you provide an `init()` method, it will override the // deprecated. If you provide an `init()` method, it will override the
// `constructor()` method! // `constructor()` method!
constructor: function () { constructor: function () {
videoJsButtonClass.call(this, player); videoJsButtonClass.call(this, player);
}, // notice the comma },
handleClick: function () { handleClick: function () {
const videoElement = document.getElementsByTagName('video')[0]; const videoElement = document.getElementsByTagName('video')[0];
videoElement.webkitShowPlaybackTargetPicker(); videoElement.webkitShowPlaybackTargetPicker();
} },
}); });
var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass()); var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
concreteButtonInstance.addClass("vjs-airplay"); concreteButtonInstance.addClass("vjs-airplay");
} }
}); });
} }
} }
export { OwncastPlayer }; export { OwncastPlayer };

79
webroot/js/social.js
View File

@@ -1,3 +1,5 @@
import { html } from "https://unpkg.com/htm/preact/index.mjs?module";
const SOCIAL_PLATFORMS = { const SOCIAL_PLATFORMS = {
default: { default: {
name: "default", name: "default",
@@ -70,58 +72,31 @@ const SOCIAL_PLATFORMS = {
}, },
}; };
Vue.component('social-list', { export default function SocialIcon(props) {
props: ['platforms'], const { platform, url } = props;
const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
const inList = !!platformInfo;
const imgRow = inList ? platformInfo.imgPos[0] : 0;
const imgCol = inList ? platformInfo.imgPos[1] : 0;
template: ` const name = inList ? platformInfo.name : platform;
<ul class="social-list flex" v-if="this.platforms.length">
<span class="follow-label">Follow me: </span>
<user-social-icon
v-for="(item, index) in this.platforms"
v-if="item.platform && item.url"
v-bind:key="index"
v-bind:platform="item.platform"
v-bind:url="item.url"
/>
</ul>
`,
}); const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`;
const itemClass = {
Vue.component('user-social-icon', { "user-social-item": true,
props: ['platform', 'url'], "flex": true,
data: function() { "use-default": !inList,
const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()]; };
const inList = !!platformInfo; const labelClass = {
const imgRow = inList ? platformInfo.imgPos[0] : 0; "platform-label": true,
const imgCol = inList ? platformInfo.imgPos[1] : 0; "visually-hidden": inList,
return { "text-indigo-800": true,
name: inList ? platformInfo.name : this.platform, };
link: this.url, return (
html`
style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`, <a class=${itemClass} target="_blank" href=${url}>
itemClass: { <span class="platform-icon rounded-lg" style=${style}></span>
"user-social-item": true, <span class=${labelClass}>Find me on ${name}</span>
"flex": true,
"use-default": !inList,
},
labelClass: {
"platform-label": true,
"visually-hidden": inList,
"text-indigo-800": true,
},
};
},
template: `
<li>
<a
v-bind:class="itemClass"
target="_blank"
:href="link"
>
<span class="platform-icon rounded-lg" :style="style" />
<span v-bind:class="labelClass">Find me on {{platform}}</span>
</a> </a>
</li> `);
`, }
});

22
webroot/js/utils.js
View File

@@ -7,6 +7,14 @@ export const URL_CONFIG = `/config`;
export const URL_STREAM = `/hls/stream.m3u8`; export const URL_STREAM = `/hls/stream.m3u8`;
export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`; export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
export const TIMER_STATUS_UPDATE = 5000; // ms
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 MESSAGE_OFFLINE = 'Stream is offline.';
export const MESSAGE_ONLINE = 'Stream is online';
export const POSTER_DEFAULT = `/img/logo.png`; export const POSTER_DEFAULT = `/img/logo.png`;
export const POSTER_THUMB = `/thumbnail.jpg`; export const POSTER_THUMB = `/thumbnail.jpg`;
@@ -66,27 +74,27 @@ export function pluralize(string, count) {
// Trying to determine if browser is mobile/tablet. // Trying to determine if browser is mobile/tablet.
// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent // Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
export function hasTouchScreen() { export function hasTouchScreen() {
var hasTouchScreen = false; let hasTouch = false;
if ("maxTouchPoints" in navigator) { if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0; hasTouch = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) { } else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0; hasTouch = navigator.msMaxTouchPoints > 0;
} else { } else {
var mQ = window.matchMedia && matchMedia("(pointer:coarse)"); var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") { if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches; hasTouch = !!mQ.matches;
} else if ('orientation' in window) { } else if ('orientation' in window) {
hasTouchScreen = true; // deprecated, but good fallback hasTouch = true; // deprecated, but good fallback
} else { } else {
// Only as a last resort, fall back to user agent sniffing // Only as a last resort, fall back to user agent sniffing
var UA = navigator.userAgent; var UA = navigator.userAgent;
hasTouchScreen = ( hasTouch = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA) /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
); );
} }
} }
return hasTouchScreen; return hasTouch;
} }
// generate random avatar from https://robohash.org // generate random avatar from https://robohash.org