pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

wip.. initial setup for preact integration into main app

pull/120/head
Ginger Wong 5 years ago
parent
756311f03c
commit
136a575973
5 changed files with 390 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      webroot/index2.html
  2. 310
      webroot/js/app2.js
  3. 2
      webroot/js/chat/chat-input.js
  4. 1
      webroot/js/chat/standalone.js
  5. 2
      webroot/js/utils.js

76
webroot/index2.html
Unescape View File

@ -0,0 +1,76 @@ @@ -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
Unescape View File

@ -0,0 +1,310 @@ @@ -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>
`);
}
}

2
webroot/js/chat/chat-input.js
Unescape View File

@ -111,7 +111,7 @@ export default class ChatInput extends Component { @@ -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;

1
webroot/js/chat/standalone.js
Unescape View File

@ -54,6 +54,7 @@ export default class StandaloneChat extends Component { @@ -54,6 +54,7 @@ export default class StandaloneChat extends Component {
`);
}
// not needed for standalone, just messages only. remove later.
return (
html`
<${Fragment}>

2
webroot/js/utils.js
Unescape View File

@ -1,6 +1,8 @@ @@ -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`;

Write Preview
Loading…
Cancel
Save