mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
wip.. initial setup for preact integration into main app
This commit is contained in:
Ginger Wong
parent
756311f03c
commit
136a575973
76
webroot/index2.html
Normal file
76
webroot/index2.html
Normal file
@ -0,0 +1,76 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
|
||||
<link href="//unpkg.com/video.js@7.9.2/dist/video-js.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
|
||||
<script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
|
||||
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
|
||||
|
||||
<link href="./styles/layout.css" rel="stylesheet" />
|
||||
<link href="./styles/chat.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body class="bg-gray-300 text-gray-800">
|
||||
<div id="app"></div>
|
||||
|
||||
<script type="module">
|
||||
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
|
||||
import App from './js/app2.js';
|
||||
|
||||
(function () {
|
||||
render(html`<${App} />`, document.getElementById("app"));
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
.noscript {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.noscript a {
|
||||
display: inline;
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<div class="noscript">
|
||||
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png">
|
||||
<br/>
|
||||
<p>
|
||||
This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
310
webroot/js/app2.js
Normal file
310
webroot/js/app2.js
Normal file
@ -0,0 +1,310 @@
|
||||
import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
|
||||
import htm from 'https://unpkg.com/htm?module';
|
||||
const html = htm.bind(h);
|
||||
|
||||
|
||||
import UsernameForm from './chat/username.js';
|
||||
import Chat from './chat/chat.js';
|
||||
import Websocket from './websocket.js';
|
||||
|
||||
import { getLocalStorage, generateAvatar, generateUsername, URL_OWNCAST, URL_CONFIG, URL_STATUS, addNewlines } from './utils.js';
|
||||
import { KEY_USERNAME, KEY_AVATAR, } from './utils/chat.js';
|
||||
|
||||
export default class App extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
websocket: new Websocket(),
|
||||
chatEnabled: true, // always true for standalone chat
|
||||
username: getLocalStorage(KEY_USERNAME) || generateUsername(),
|
||||
userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
|
||||
|
||||
streamStatus: null,
|
||||
player: null,
|
||||
configData: {},
|
||||
};
|
||||
|
||||
// timers
|
||||
this.playerRestartTimer = null;
|
||||
this.offlineTimer = null;
|
||||
this.statusTimer = null;
|
||||
this.disableChatTimer = null;
|
||||
this.streamDurationTimer = null;
|
||||
|
||||
this.handleUsernameChange = this.handleUsernameChange.bind(this);
|
||||
this.getConfig = this.getConfig.bind(this);
|
||||
this.getStreamStatus = this.getStreamStatus.bind(this);
|
||||
this.getExtraUserContent = this.getExtraUserContent.bind(this);
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getConfig();
|
||||
|
||||
// DO LATER..
|
||||
// this.player = new OwncastPlayer();
|
||||
// this.player.setupPlayerCallbacks({
|
||||
// onReady: this.handlePlayerReady,
|
||||
// onPlaying: this.handlePlayerPlaying,
|
||||
// onEnded: this.handlePlayerEnded,
|
||||
// onError: this.handlePlayerError,
|
||||
// });
|
||||
// this.player.init();
|
||||
}
|
||||
|
||||
// fetch /config data
|
||||
getConfig() {
|
||||
fetch(URL_CONFIG)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Network response was not ok ${response.ok}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
this.setConfigData(json);
|
||||
})
|
||||
.catch(error => {
|
||||
this.handleNetworkingError(`Fetch config: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
// fetch stream status
|
||||
getStreamStatus() {
|
||||
fetch(URL_STATUS)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Network response was not ok ${response.ok}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(json => {
|
||||
this.updateStreamStatus(json);
|
||||
})
|
||||
.catch(error => {
|
||||
this.handleOfflineMode();
|
||||
this.handleNetworkingError(`Stream status: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
// fetch content.md
|
||||
getExtraUserContent(path) {
|
||||
fetch(path)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Network response was not ok ${response.ok}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
const descriptionHTML = new showdown.Converter().makeHtml(text);
|
||||
this.vueApp.extraUserContent = descriptionHTML;
|
||||
})
|
||||
.catch(error => {
|
||||
this.handleNetworkingError(`Fetch extra content: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
setConfigData(data = {}) {
|
||||
const { title, extraUserInfoFileName, summary } = data;
|
||||
|
||||
window.document.title = title;
|
||||
if (extraUserInfoFileName) {
|
||||
this.getExtraUserContent(extraUserInfoFileName);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
configData: {
|
||||
...data,
|
||||
summary: summary && addNewlines(summary),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// handle UI things from stream status result
|
||||
updateStreamStatus(status = {}) {
|
||||
if (!status) {
|
||||
return;
|
||||
}
|
||||
// update UI
|
||||
this.vueApp.viewerCount = status.viewerCount;
|
||||
this.vueApp.sessionMaxViewerCount = status.sessionMaxViewerCount;
|
||||
this.vueApp.overallMaxViewerCount = status.overallMaxViewerCount;
|
||||
|
||||
this.lastDisconnectTime = status.lastDisconnectTime;
|
||||
|
||||
if (!this.streamStatus) {
|
||||
// display offline mode the first time we get status, and it's offline.
|
||||
if (!status.online) {
|
||||
this.handleOfflineMode();
|
||||
} else {
|
||||
this.handleOnlineMode();
|
||||
}
|
||||
} 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) {
|
||||
// only do this if video is paused, so no unnecessary img fetches
|
||||
if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
|
||||
this.player.setPoster();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stop status timer and disable chat after some time.
|
||||
handleOfflineMode() {
|
||||
this.vueApp.isOnline = false;
|
||||
clearInterval(this.streamDurationTimer);
|
||||
this.vueApp.streamStatus = MESSAGE_OFFLINE;
|
||||
if (this.streamStatus) {
|
||||
const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
|
||||
const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
|
||||
this.disableChatTimer = setTimeout(this.messagingInterface.disableChat, countdown);
|
||||
}
|
||||
}
|
||||
|
||||
// play video!
|
||||
handleOnlineMode() {
|
||||
this.vueApp.playerOn = true;
|
||||
this.vueApp.isOnline = true;
|
||||
this.vueApp.streamStatus = MESSAGE_ONLINE;
|
||||
|
||||
this.player.startPlayer();
|
||||
clearTimeout(this.disableChatTimer);
|
||||
this.disableChatTimer = null;
|
||||
this.messagingInterface.enableChat();
|
||||
|
||||
this.streamDurationTimer =
|
||||
setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER);
|
||||
}
|
||||
|
||||
|
||||
handleUsernameChange(newName, newAvatar) {
|
||||
this.setState({
|
||||
username: newName,
|
||||
userAvatarImage: newAvatar,
|
||||
});
|
||||
}
|
||||
|
||||
handleChatToggle() {
|
||||
const { chatEnabled: curChatEnabled } = this.state;
|
||||
this.setState({
|
||||
chatEnabled: !curChatEnabled,
|
||||
});
|
||||
}
|
||||
|
||||
handleNetworkingError(error) {
|
||||
console.log(`>>> App Error: ${error}`);
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { username, userAvatarImage, websocket, configData } = state;
|
||||
const {
|
||||
version: appVersion,
|
||||
logo = {},
|
||||
socialHandles,
|
||||
name: streamnerName,
|
||||
summary,
|
||||
tags,
|
||||
title,
|
||||
} = configData;
|
||||
const { small: smallLogo, large: largeLogo } = logo;
|
||||
|
||||
const bgLogo = { backgroundImage: `url(${smallLogo})` };
|
||||
const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
|
||||
|
||||
// not needed for standalone, just messages only. remove later.
|
||||
return (
|
||||
html`
|
||||
<div id="app-container" class="flex chat">
|
||||
<div id="top-content">
|
||||
<header class="flex border-b border-gray-900 border-solid shadow-md">
|
||||
<h1 v-cloak class="flex text-gray-400">
|
||||
<span
|
||||
id="logo-container"
|
||||
class="rounded-full bg-white px-1 py-1"
|
||||
style=${bgLogo}
|
||||
>
|
||||
<img class="logo visually-hidden" src=${smallLogo}>
|
||||
</span>
|
||||
<span class="instance-title">${title}</span>
|
||||
</h1>
|
||||
|
||||
<${UsernameForm}
|
||||
username=${username}
|
||||
userAvatarImage=${userAvatarImage}
|
||||
handleUsernameChange=${this.handleUsernameChange}
|
||||
handleChatToggle=${this.handleChatToggle}
|
||||
/>
|
||||
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div
|
||||
id="video-container"
|
||||
class="flex owncast-video-container bg-black"
|
||||
style=${bgLogoLarge}
|
||||
>
|
||||
<video
|
||||
class="video-js vjs-big-play-centered"
|
||||
id="video"
|
||||
preload="auto"
|
||||
controls
|
||||
playsinline
|
||||
>
|
||||
</video>
|
||||
</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">
|
||||
<span>{{ streamStatus }}</span>
|
||||
<span v-if="isOnline">{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
||||
<span v-if="isOnline">Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
||||
<span v-if="isOnline">{{ overallMaxViewerCount }} overall.</span>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section id="user-content" aria-label="User information">
|
||||
<user-details
|
||||
v-bind:logo="logo"
|
||||
v-bind:platforms="socialHandles"
|
||||
v-bind:summary="summary"
|
||||
v-bind:tags="tags"
|
||||
>{{streamerName}}</user-details>
|
||||
|
||||
<div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
|
||||
</section>
|
||||
|
||||
<footer class="flex">
|
||||
<span>
|
||||
<a href="${URL_OWNCAST}" target="_blank">About Owncast</a>
|
||||
</span>
|
||||
<span>Version ${appVersion}</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<${Chat}
|
||||
websocket=${websocket}
|
||||
username=${username}
|
||||
userAvatarImage=${userAvatarImage}
|
||||
chatEnabled
|
||||
/>
|
||||
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@ export default class ChatInput extends Component {
|
||||
return false;
|
||||
}
|
||||
|
||||
const partial = inputHTML.substring(at + 1, position).trim();
|
||||
let partial = inputHTML.substring(at + 1, position).trim();
|
||||
|
||||
if (partial === this.suggestion) {
|
||||
partial = this.partial;
|
||||
|
||||
@ -54,6 +54,7 @@ export default class StandaloneChat extends Component {
|
||||
`);
|
||||
}
|
||||
|
||||
// not needed for standalone, just messages only. remove later.
|
||||
return (
|
||||
html`
|
||||
<${Fragment}>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
export const URL_STATUS = `/status`;
|
||||
export const URL_CHAT_HISTORY = `/chat`;
|
||||
export const URL_CUSTOM_EMOJIS = `/emoji`;
|
||||
export const URL_CONFIG = `/config`;
|
||||
|
||||
// TODO: This directory is customizable in the config. So we should expose this via the config API.
|
||||
export const URL_STREAM = `/hls/stream.m3u8`;
|
||||
export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user