a0311c031e
Focus-friendly VMC shell for Tizen with live TV and playback against the master API. Co-authored-by: Cursor <cursoragent@cursor.com>
149 lines
6.5 KiB
HTML
149 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080, initial-scale=1.0, user-scalable=no" />
|
|
<title>VMC</title>
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
<style type="text/css">
|
|
html, body { margin:0; width:100%; height:100%; background:#0B0B0B; color:#fff; font-family:Arial,sans-serif; }
|
|
#boot-banner {
|
|
position:absolute; top:0; left:0; right:0; bottom:0;
|
|
background:#0B0B0B; color:#E50914; font-size:48px; font-weight:900;
|
|
text-align:center; padding-top:38%; z-index:9999; letter-spacing:0.08em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin:0;background:#0B0B0B;color:#fff;">
|
|
<div id="boot-banner">VMC</div>
|
|
|
|
<div id="app">
|
|
<section id="screen-pair" class="screen">
|
|
<div class="pair-card">
|
|
<div class="brand">VMC</div>
|
|
<h1>Koppel deze TV</h1>
|
|
<p class="muted">Open de link op je telefoon of computer en vul de code in.</p>
|
|
<div id="pair-code" class="pair-code">····</div>
|
|
<p id="pair-link" class="pair-link"></p>
|
|
<p id="pair-status" class="muted">Bezig met starten…</p>
|
|
<button class="btn focusable" id="pair-refresh">Nieuwe code</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screen-profiles" class="screen hidden">
|
|
<div class="profiles-wrap">
|
|
<h1>Wie kijkt er?</h1>
|
|
<p class="muted">Kies een profiel</p>
|
|
<div id="profile-grid" class="profile-grid"></div>
|
|
<div id="pin-panel" class="pin-panel hidden">
|
|
<h2 id="pin-title">PIN</h2>
|
|
<div id="pin-dots" class="pin-dots"></div>
|
|
<div class="numpad" id="pin-pad"></div>
|
|
<button class="btn focusable" id="pin-cancel">Annuleer</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screen-main" class="screen hidden">
|
|
<nav id="topnav" class="topnav overlay">
|
|
<div class="nav-brand">VMC</div>
|
|
<button class="nav-tab focusable active" data-tab="home">Home<span class="nav-underline"></span></button>
|
|
<button class="nav-tab focusable" data-tab="movies">Films<span class="nav-underline"></span></button>
|
|
<button class="nav-tab focusable" data-tab="series">Series<span class="nav-underline"></span></button>
|
|
<button class="nav-tab focusable hidden" data-tab="tv" id="nav-tv">TV<span class="nav-underline"></span></button>
|
|
<button class="nav-tab focusable" data-tab="search">Zoeken<span class="nav-underline"></span></button>
|
|
<button class="nav-tab focusable" data-tab="settings">Instellingen<span class="nav-underline"></span></button>
|
|
<button class="nav-profile focusable" id="nav-profile" title="Profiel wisselen"></button>
|
|
</nav>
|
|
<div id="main-body" class="main-body home-mode">
|
|
<div id="tab-home" class="tab-pane"></div>
|
|
<div id="tab-movies" class="tab-pane hidden"></div>
|
|
<div id="tab-series" class="tab-pane hidden"></div>
|
|
<div id="tab-tv" class="tab-pane hidden"></div>
|
|
<div id="tab-search" class="tab-pane hidden"></div>
|
|
<div id="tab-settings" class="tab-pane hidden"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screen-detail" class="screen hidden">
|
|
<div id="detail-bg" class="detail-bg"></div>
|
|
<div class="detail-shade"></div>
|
|
<div class="detail-body">
|
|
<button class="btn focusable" id="detail-back">Terug</button>
|
|
<div id="detail-logo" class="hero-logo hidden"></div>
|
|
<h1 id="detail-title"></h1>
|
|
<div id="detail-meta" class="hero-meta"></div>
|
|
<p id="detail-overview" class="detail-overview"></p>
|
|
<div id="detail-actions" class="hero-actions"></div>
|
|
<div id="detail-episodes" class="episodes"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screen-player" class="screen hidden">
|
|
<div id="av-object-wrap" class="av-wrap"></div>
|
|
<video id="html-player" class="html-player hidden"></video>
|
|
<div id="player-subs" class="player-subs hidden"></div>
|
|
<div id="player-ui" class="player-ui">
|
|
<div class="player-chrome">
|
|
<div id="player-title" class="player-title"></div>
|
|
<div class="player-bar">
|
|
<div id="player-progress" class="player-progress"><div id="player-fill"></div></div>
|
|
<div class="player-time-row">
|
|
<span id="player-time" class="player-time"></span>
|
|
</div>
|
|
</div>
|
|
<div class="player-controls" id="player-controls">
|
|
<button type="button" class="pctrl focusable" id="btn-play" title="Pauze">Pauze</button>
|
|
<button type="button" class="pctrl focusable" id="btn-rew" title="10s terug">-10s</button>
|
|
<button type="button" class="pctrl focusable" id="btn-ff" title="10s vooruit">+10s</button>
|
|
<span class="pctrl-spacer"></span>
|
|
<div class="player-actions" id="player-actions">
|
|
<button type="button" class="pctrl text focusable" id="btn-audio">Audio</button>
|
|
<button type="button" class="pctrl text focusable" id="btn-subs">Ondertiteling</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="player-menu" class="player-menu hidden">
|
|
<div class="player-menu-panel">
|
|
<div id="player-menu-title" class="player-menu-title">Audio</div>
|
|
<div id="player-menu-list" class="player-menu-list"></div>
|
|
<button type="button" class="btn focusable" id="player-menu-close">Sluiten</button>
|
|
</div>
|
|
</div>
|
|
<div id="player-error" class="player-error hidden"></div>
|
|
</section>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
<div id="loading" class="loading hidden"><div class="spinner"></div></div>
|
|
<div id="fatal" class="fatal hidden"></div>
|
|
</div>
|
|
|
|
<script src="js/polyfill.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/player.js"></script>
|
|
<script src="js/focus.js"></script>
|
|
<script src="js/live.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
setTimeout(function () {
|
|
var b = document.getElementById("boot-banner");
|
|
if (!b) return;
|
|
if (b.style.display === "none" || b.style.visibility === "hidden") return;
|
|
b.style.background = "#12080a";
|
|
b.style.color = "#ffffff";
|
|
b.style.paddingTop = "28%";
|
|
b.style.fontSize = "22px";
|
|
b.style.letterSpacing = "0";
|
|
b.innerHTML =
|
|
"App start niet automatisch.<br/>McApi=" +
|
|
(typeof window.McApi) +
|
|
" McApp=" +
|
|
(typeof window.McApp) +
|
|
" McLive=" +
|
|
(typeof window.McLive) +
|
|
"<br/>Herinstalleer of stuur deze tekst door.";
|
|
}, 2500);
|
|
</script>
|
|
</body>
|
|
</html>
|