-
- {{ streamStatus }}
- {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.
- Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.
- {{ overallMaxViewerCount }} overall.
+
+ ${streamStatusMessage}
+ ${viewerCount} ${pluralize('viewer', viewerCount)}.
+ Max ${pluralize('viewer', sessionMaxViewerCount)}.
+ ${overallMaxViewerCount} overall.
- {{streamerName}}
-
-
diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js
index 7d9fed2ca..dcc904ad5 100644
--- a/webroot/js/chat/chat-input.js
+++ b/webroot/js/chat/chat-input.js
@@ -240,8 +240,8 @@ export default class ChatInput extends Component {
<${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"
- placeholderText=${placeholderText}
+ placeholderText=${placeholderText}
innerRef=${this.formMessageInput}
html=${inputHTML}
disabled=${!inputEnabled}
@@ -251,7 +251,7 @@ export default class ChatInput extends Component {
onBlur=${this.handleMessageInputBlur}
onPaste=${this.handlePaste}
- />
+ />
{{extraUserContent}}
+
+
+
+ 
+
+
+
+ + About + ${streamerName} +
+ + + +
${inputWarning}
diff --git a/webroot/js/chat/standalone.js b/webroot/js/chat/standalone.js
index 14f0fd951..115982d63 100644
--- a/webroot/js/chat/standalone.js
+++ b/webroot/js/chat/standalone.js
@@ -48,7 +48,6 @@ export default class StandaloneChat extends Component {
websocket=${websocket}
username=${username}
userAvatarImage=${userAvatarImage}
- chatEnabled
messagesOnly
/>
`);
@@ -69,7 +68,6 @@ export default class StandaloneChat extends Component {
websocket=${websocket}
username=${username}
userAvatarImage=${userAvatarImage}
- chatEnabled
/>
`);
diff --git a/webroot/js/chat/username.js b/webroot/js/chat/username.js
index c18eb93de..95d82259b 100644
--- a/webroot/js/chat/username.js
+++ b/webroot/js/chat/username.js
@@ -59,7 +59,7 @@ export default class UsernameForm extends Component {
}
render(props, state) {
- const { username, userAvatarImage, handleChatToggle } = props;
+ const { username, userAvatarImage } = props;
const { displayForm } = state;
const narrowSpace = document.body.clientWidth < 640;
@@ -76,34 +76,31 @@ export default class UsernameForm extends Component {
}
return (
html`
-
-
-
-
-
- Find me on {{platform}}
+ const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`;
+ const itemClass = {
+ "user-social-item": true,
+ "flex": true,
+ "use-default": !inList,
+ };
+ const labelClass = {
+ "platform-label": true,
+ "visually-hidden": inList,
+ "text-indigo-800": true,
+ };
+ return (
+ html`
+
+
+ Find me on ${name}
-
- `,
-});
+ `);
+}
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index 238bd8f58..bd9f12d08 100644
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@@ -7,6 +7,14 @@ export const URL_CONFIG = `/config`;
export const URL_STREAM = `/hls/stream.m3u8`;
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_THUMB = `/thumbnail.jpg`;
@@ -66,27 +74,27 @@ export function pluralize(string, count) {
// Trying to determine if browser is mobile/tablet.
// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
export function hasTouchScreen() {
- var hasTouchScreen = false;
+ let hasTouch = false;
if ("maxTouchPoints" in navigator) {
- hasTouchScreen = navigator.maxTouchPoints > 0;
+ hasTouch = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
- hasTouchScreen = navigator.msMaxTouchPoints > 0;
+ hasTouch = navigator.msMaxTouchPoints > 0;
} else {
var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
- hasTouchScreen = !!mQ.matches;
+ hasTouch = !!mQ.matches;
} else if ('orientation' in window) {
- hasTouchScreen = true; // deprecated, but good fallback
+ hasTouch = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
var UA = navigator.userAgent;
- hasTouchScreen = (
+ hasTouch = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\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
- 
- ${username}
-
-
-
-
-
-
-
-
+
+
`);
}
diff --git a/webroot/js/player.js b/webroot/js/player.js
index 986e3566d..6e88d875e 100644
--- a/webroot/js/player.js
+++ b/webroot/js/player.js
@@ -17,7 +17,6 @@ const VIDEO_OPTIONS = {
vhs: {
// used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
enableLowInitialPlaylist: true,
-
}
},
liveTracker: {
@@ -128,27 +127,25 @@ class OwncastPlayer {
if (window.WebKitPlaybackTargetAvailabilityEvent) {
var videoJsButtonClass = videojs.getComponent('Button');
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
// `constructor()` method!
constructor: function () {
videoJsButtonClass.call(this, player);
- }, // notice the comma
-
+ },
+
handleClick: function () {
const videoElement = document.getElementsByTagName('video')[0];
videoElement.webkitShowPlaybackTargetPicker();
- }
+ },
});
-
+
var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
concreteButtonInstance.addClass("vjs-airplay");
}
- });
+ });
}
-
-
}
-export { OwncastPlayer };
\ No newline at end of file
+export { OwncastPlayer };
diff --git a/webroot/js/social.js b/webroot/js/social.js
index a36c822b4..ec37ad558 100644
--- a/webroot/js/social.js
+++ b/webroot/js/social.js
@@ -1,3 +1,5 @@
+import { html } from "https://unpkg.com/htm/preact/index.mjs?module";
+
const SOCIAL_PLATFORMS = {
default: {
name: "default",
@@ -70,58 +72,31 @@ const SOCIAL_PLATFORMS = {
},
};
-Vue.component('social-list', {
- props: ['platforms'],
+export default function SocialIcon(props) {
+ 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;
-});
-
-Vue.component('user-social-icon', {
- props: ['platform', 'url'],
- data: function() {
- const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()];
- const inList = !!platformInfo;
- const imgRow = inList ? platformInfo.imgPos[0] : 0;
- const imgCol = inList ? platformInfo.imgPos[1] : 0;
- return {
- name: inList ? platformInfo.name : this.platform,
- link: this.url,
-
- style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
- itemClass: {
- "user-social-item": true,
- "flex": true,
- "use-default": !inList,
- },
- labelClass: {
- "platform-label": true,
- "visually-hidden": inList,
- "text-indigo-800": true,
- },
- };
- },
- template: `
-
+
+ ${username}
+
+
+
+
+
+
+
-