LogalDeveloper/owncast
0
Fork 0
Code Activity

App Javascript refactor (#56)

Browse Source 
* objectify app away from window. wip

* fix messaging obj binding; put logo behind video; fix /null issue with temp logo image

* first pass at js refactor

* remove unused files that had been consolidated during refactor

* set up vue before getting config

* add a few comments

* dont use big arrow function, just bind, for safari

* add airplay after instantiating video; check if input exists before disabling it;:

* only set poster on pause during playback, and onEnded; take out sample videoJS tech options

* disable chat after 5mins after going offline

* move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources

* disable chat based on lastdisconnecttime

* fix typo; do offline mode onEnded instead of status offline

* move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden

* fixes'

* don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button

* clean up console logs

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
gingervitis
2020-07-16 12:17:05 -07:00
committed by GitHub
parent 2afde7b3f9
commit 42b0b05d78
10 changed files with 504 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
webroot/index.html
View File

@@ -13,20 +13,10 @@
<link href="./styles/layout.css" rel="stylesheet" />
</head>
<script>
/*
GW TODO:
- off line/ video done mode.
- remove listeners on unload?
- accessilbity
*/
</script>
<body class="bg-gray-300 text-gray-800">
<div id="app-container" v-cloak class="flex no-chat">
<div id="app-container" class="flex no-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">
@@ -69,17 +59,18 @@ GW TODO:
</header>
<main>
<div id="video-container" class="flex owncast-video-container bg-black">
<main v-bind:class="{ online: isOnline }">
<div
id="video-container"
class="flex owncast-video-container bg-black"
v-bind:style="{ backgroundImage: 'url(' + logoLarge + ')' }"
>
<video
class="video-js"
class="video-js vjs-big-play-centered"
id="video"
preload="auto"
controls
autoplay
playsinline
muted
poster="./img/logo.png"
>
</video>
</div>
@@ -109,7 +100,6 @@ GW TODO:
</div>
<section id="chat-container-wrap" class="flex">
<div v-if="layout !== 'desktop'" id="user-content-touch">
@@ -172,17 +162,22 @@ GW TODO:
</section>
</div>
<script src="js/status.js"></script>
<script src="js/usercolors.js"></script>
<script src="js/config.js"></script>
<script src="js/utils.js"></script>
<script src="js/message.js"></script>
<script src="js/social.js"></script>
<script src="js/components.js"></script>
<script src="js/player.js"></script>
<script src="js/app.js"></script>
<script src="js/player/airplay.js"></script>
<script src="js/player/player.js"></script>
<script>
(function () {
const app = new Owncast();
app.init();
})();
</script>
</body>
</html>