Tiny fixes

karl-rousseau · Jan 3, 2018 · 082d3d4 · 082d3d4
1 parent 631fb79
commit 082d3d4
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
-# HybridTvViewer ![](http://vanilla-js.com/assets/button.png) [<img align="right" src="https://img.shields.io/github/license/HybridTvViewer/gesturefy.svg">](https://github.com/karl-rousseau/HybridTvViewer/blob/master/LICENSE)
+# HybridTvViewer ![](http://vanilla-js.com/assets/button.png) [<img align="right" src="https://img.shields.io/badge/License-MIT-yellow.svg">](https://github.com/karl-rousseau/HybridTvViewer/blob/master/LICENSE)
 
 Embracing such Hybrid Interactive TV Technologies:
 
-![](img/logo-hbbtv.png) &nbsp;&nbsp;&nbsp; ![](img/logo-ohtv.png) &nbsp;&nbsp;&nbsp; ![](img/logo-mhp.png) &nbsp;&nbsp;&nbsp; ![](img/logo-oipf.png)
+![](img/logo-hbbtv.png) &nbsp;&nbsp;&nbsp; ![](img/logo-atsc.png) &nbsp;&nbsp;&nbsp; ![](img/logo-ohtv.png) &nbsp;&nbsp;&nbsp; ![](img/logo-mhp.png) &nbsp;&nbsp;&nbsp; ![](img/logo-oipf.png)
 
 ## Preamble
 
@@ -30,61 +30,14 @@ I have decided to do it, as at work we are only using CHROME as a development to
 | external inputs | it handles some external inputs such as CI+ APDU reply message, Stream-Event content customization & triggering, DVB channels with customized LCN, ... |
 | video support | it will handle the rendering of browser unrecognized broadcast video stream: Mpeg-TS and Mpeg-DASH |
 
-## Status
-
-- [x] ~~removing CHROME warning popups for various undefined mime-types~~
-- [x] ~~currently only as a prototype stage but the proof of concept has been validated and many features have been put in the options page~~.
-- :skull: ~~SUN MHP technology has been put aside as it will need to have a JVM installed with its associated plugin
-  (a mess to install and moreover this technology is now replaced by the brand new one called HbbTV)
-  I know [GINGA](https://en.wikipedia.org/wiki/Ginga_(middleware) is MHP based and still present in South America but for how long ...~~
-- [x] A dedicated tab is added in the [Web Inspector](https://developer.chrome.com/devtools) for user debugging purpose
-- :vhs: **MP4 Transport Stream** video (without DRM) is supported using an external library:
-  * ~~Integration of [Dash.JS](https://github.com/Dash-Industry-Forum/dash.js) library handling Mpeg-DASH.~~
-  * ~~Chrome V55+ can handle HEVC with HTML5 video tag but it need [to be recompiled](https://lexxai.blogspot.fr/2016/09/chromium-ubuntu-x265-hevc.html) with a proper FFmpeg~~
-  * will have to investigate :mag:  [upipe](https://github.com/cmassiot/upipe/tree/master/examples/chrome/player_chrome) Chrome NaCl rendering plugin or VLC v3 Asm.js release
-- :satellite: **DVB-SI/PSI** tables (such as EIT & AIT) extraction inside MPEG-TS files, will be handle by an external application (using Asm.js or WebAssembly)
-- :scissors: ~~OIPF technology will not be fully implemented (only the HbbTV subset will be done)~~
-- **HbbTV V2.0** might be present (with an exposed WebSocket server) when V1.5 implementation will be done
-  * for the meantime, look at [node-hbbtv](https://github.com/fraunhoferfokus/node-hbbtv) from the well-known Fraunhofer
-- [ ] CI+ HbbTV implementation is hereby emulated with a default code (can be customized)
-
-```
-If you have video Cross-Origin issues, you can temporary test your video by adding those parameters when launching your Chrome based browser: --disable-web-security --user-data-dir
-```
-
-## Detection and usage
-
-In order to automatically activate the extension on an given web page, you need to follow
-standard implementation as seen for example on SAMSUNG iDTV devices that are looking for
-this HTTP header field:
-```
-Content-Type: application/vnd.hbbtv.xhtml+xml
-```
-This HTTP header response is coming from **the server side** where the page is hosted as you can see with such UNIX command:
 ```
-curl -I http://www.arte.tv/redbutton/index.html
-... (HTTP headers)
+If you have video Cross-Origin issues, you can temporary test your video by adding those parameters  
+when launching your Chrome based browser: --disable-web-security --user-data-dir
 ```
 
-You can also add a defined META tag inside your page:
-
-| Technology    | META tag |
-| ------------- |:----------------:|
-| *HbbTV*       | &lt;meta http-equiv="content-type" content="application/vnd.hbbtv.xhtml+xml; charset=UTF-8" /&gt; |
-| *CE-HTML*     | &lt;meta http-equiv="content-type" content="application/ce-html+xml; charset=UTF-8" /&gt; |
-
-and sometime with the addition of a given DOCTYPE:
-
-| Technology    | DOCTYPE tag |
-| ------------- |:------------------:|
-| *HbbTV*       | &lt;!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd" &gt; |
-| *BML*         | &lt;!DOCTYPE BML PUBLIC "+//ARIB STD-B24:1999//DTD BML Document//JA" "http://www.arib.or.jp/B24/DTD/BML_1_0.dtd" &gt; |
-
-In other cases, you can also manually click on the extension icon inside the browser's bar to show a popup then by clicking on a power icon button, you can force the page to be interpreted as an Hybrid iTV page. (this action is saved in local storage for further visits)
-
 ## Examples
 
-The purpose of this extension is mainly to validate the **MIT-xperts test suite** under CHROME and FIREFOX.
+The purpose of this extension is mainly to validate the **MIT-xperts test suite** under CHROME and FIREFOX.  
 Here are some example URL that have been extracted from various sources:
 
 | Name          | Source | URL |
@@ -93,6 +46,8 @@ Here are some example URL that have been extracted from various sources:
 | ARTE HbbTV    | French DTT TS | http://www.arte.tv/redbutton/ |
 | ARTE CE-HTML  | Philips iDTV portal | http://cehtml.arte.tv/de/2764896.cehtml |
 
+More examples (with dead ones) can be found on this catalog: http://urju.de/hbbtv/
+
 ## Abbreviations
 
 - iDTV: Integrated Digital TeleVision
@@ -121,4 +76,5 @@ Here are some example URL that have been extracted from various sources:
 - OHTV (Open Hybrid TV) : similar to HbbTV and used for example at [iCON TV](http://able.kbs.co.kr/enter/tal_view.php?mseq=16&pcg=&pgseq=&no=270211) in KOREA by the national broadcaster *KBS* since 2010
 - BML (Broadcast Markup Language) : similar to HbbTV and defined by ARIB STD B-24 standard used in JAPAN over ISDB-T broadcasted channels like [*NHK*](https://www.nhk.or.jp/strl/publica/bt/en/fe0003-1.html)
 - CE-HTML (Consumer Electronics HTML) : nowadays less used and only found on old devices
-- OIPF (Open IPTV Forum) : used on some STB and since 2014 activities have been transfered to HbbTV association
+- OIPF (Open IPTV Forum) : used on some STB. Since 2014 activities have been transfered to HbbTV association
+- ATSC (Advanced Television Systems Committee) : broadcast standard used in USA where [ATSC V3.0](https://www.atsc.org/standards/atsc-3-0-standards/) is based on HbbTV 2.0
diff --git a/css/injector.css b/css/injector.css
@@ -1,37 +1,38 @@
-html.tvViewer {
+html.tvViewer,html.hbbtv {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 1;
     background-color: gray;
     background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(0,0,0,.5) 15px, rgba(0,0,0,.5) 30px) !important;
 }
 
-html.tvViewer.light {
+html.tvViewer.light,html.hbbtv.light {
     background-color: white;
-    background-image: repeating-linear-gradient(-45deg, #eeeeee, #eeeeee 15px, #fbfbfb 15px, #fbfbfb 30px) !important;
+    background-image: repeating-linear-gradient(0deg, #ffffff, #ffffff 15px, #eeeeee 15px, #eeeeee 30px) !important;
 }
 
-html.tvViewer > body {
+html.tvViewer > body,html.hbbtv > body {
     position: absolute;
     width: 1280px !important;
     height: 720px !important;
     box-shadow: 0 0 100px 50px black;
     overflow: visible !important;
 }
 
-html.tvViewer.light > body {
+html.tvViewer.light > body,html.hbbtv.light > body {
     box-shadow: 0 0 100px 50px gray;
 }
 
-html.tvViewer > body.centered {
+html.tvViewer > body.centered,html.hbbtv > body.centered {
     top: 50% !important;
     left: 50% !important;
     margin-top: -360px !important;
     margin-left: -640px !important;
 }
 
-html.tvViewer > body.overscan::after {
+html.tvViewer > body.overscan::after,html.hbbtv > body.overscan::after {
     content: "";
     position: absolute;
     width: 1280px;
@@ -49,7 +50,7 @@ html.tvViewer > body.overscan::after {
     outline-offset: -36px;
 }
 
-html.tvViewer.light > body.overscan::after {
+html.tvViewer.light > body.overscan::after,html.hbbtv.light > body.overscan::after {
     border-color: rgba(255,255,255,.5);
 }
 
@@ -87,18 +88,19 @@ body {
     font-family: tiresias,sans-serif;
 }
 
-html.tvViewer > body span.keybutton {
+body span.keybutton {
     text-align: center;
     border-radius: 5px;
     border: 1px solid transparent;
     background-color: darkgray;
 }
 
-html.tvViewer > body span.keybutton.focus {
+body span.keybutton.focus {
     background-color: #333;
+    color: gray;
 }
 
-html.tvViewer > body span.keybutton:hover {
+body span.keybutton:hover {
     border: 1px solid #fff;
 }
 
@@ -188,58 +190,138 @@ span.keybutton.btrightgradient {
     content: "⌥⌘I";
 }
 
-#res2160key {
+#leftkey {
+    left: 50%;
+    width: 30px;
+    margin-left: -120px;
+}
+#leftkey:before {
+    content: "←";
+}
+
+#okkey {
+    left: 50%;
+    width: 30px;
+    margin-left: -80px;
+}
+#okkey:before {
+    content: "ok";
+}
+
+#rightkey {
+    left: 50%;
+    width: 30px;
+    margin-left: -40px;
+}
+#rightkey:before {
+    content: "→";
+}
+
+#downkey {
+    left: 50%;
+    width: 30px;
+    margin-left: 0;
+}
+#downkey:before {
+    content: "↓";
+}
+
+#backkey {
+    left: 50%;
+    width: 30px;
+    margin-left: 40px;
+}
+#backkey:before {
+    content: "back";
+}
+
+#upkey {
+    left: 50%;
+    width: 30px;
+    margin-left: 80px;
+}
+#upkey:before {
+    content: "↑";
+}
+
+#res4320key {
     right: 10px;
 }
+#res4320key:after {
+    content: "4320p";
+}
+
+#res2880key {
+    right: 60px;
+}
+#res2880key:after {
+    content: "2880p";
+}
+
+#res2160key {
+    right: 110px;
+}
 #res2160key:after {
     content: "2160p";
 }
 
 #res1440key {
-    right: 60px;
+    right: 160px;
 }
 #res1440key:after {
     content: "1440p";
 }
 
 #res1080key {
-    right: 110px;
+    right: 210px;
 }
 #res1080key:after {
     content: "1080p";
 }
 
 #res720key {
-    right: 160px;
+    right: 260px;
 }
 #res720key:after {
     content: "720p";
 }
 
-html.tvViewer > body.res720p {
+body.res720p {
     zoom: 1.0;
     -ms-zoom: 1.0;
     -moz-transform: scale(1);
 }
 
-html.tvViewer > body.res1080p {
+body.res1080p {
     zoom: 1.5;
     -ms-zoom: 1.5;
     -moz-transform: scale(1.5);
 }
 
-html.tvViewer > body.res1440p {
+body.res1440p {
     zoom: 2.0;
     -ms-zoom: 2.0;
     -moz-transform: scale(2);
 }
 
-html.tvViewer > body.res2160p {
+body.res2160p {
     zoom: 3.0;
     -ms-zoom: 3.0;
     -moz-transform: scale(3);
 }
 
+body.res2880p {
+    zoom: 4.0;
+    -ms-zoom: 4.0;
+    -moz-transform: scale(4);
+}
+
+body.res4320p {
+    zoom: 5.875;
+    -ms-zoom: 5.875;
+    -moz-transform: scale(5.875);
+}
+
 @-webkit-keyframes detected-object {
   from {}
 }

diff --git a/img/logo-atsc.png b/img/logo-atsc.png