Bug 1228929 - [TV] Seperate the Send-to-TV offline content from the i…

…frame. r=rexboy, a=jocheng
mozilla-b2g · Dec 2, 2015 · 2d54c29 · 2d54c29
1 parent 44ddb12
commit 2d54c29
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 120 deletions.
diff --git a/tv_apps/fling-tutorial/index.html b/tv_apps/fling-tutorial/index.html
@@ -3,21 +3,51 @@
   <head>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <meta charset="utf-8">
-    <title>Send video to TV</title>
+    <title>Send to TV</title>
 
     <!-- stylesheets of building blocks -->
+    <link rel="stylesheet" type="text/css" href="bower_components/smart-button/style.css">
     <link rel="stylesheet" type="text/css" href="style/index.css">
+    <link rel="stylesheet" type="text/css" href="style/offline_content.css">
+
+    <!-- building block -->
+    <script defer src="bower_components/evt/index.js"></script>
+    <script defer src="bower_components/smart-button/script.js"></script>
+
+    <!-- shared libraries -->
+    <script defer src="shared/js/smart-screen/simple_key_navigation.js"></script>
+    <script defer src="shared/js/smart-screen/key_navigation_adapter.js"></script>
+    <script defer src="shared/js/smart-screen/f_t_e_wizard.js"></script>
 
     <!-- For test purpose on phone only -->
     <script defer src="shared/js/gesture_detector.js"></script>
     <script defer src="shared/js/smart-screen/init_gesture.js"></script>
 
     <!-- main javascript code -->
     <script defer src="js/index.js"></script>
+
+    <!-- Shared L10n libraries -->
+    <script defer src="shared/js/l10n.js"></script>
+
+    <!-- L10n properties -->
+    <meta name="defaultLanguage" content="en-US">
+    <meta name="availableLanguages" content="en-US">
+    <link rel="localization" href="locales/fling-tutorial.{locale}.properties"/>
   </head>
 
   <body>
-    <iframe id="mozIframe" mozbrowser></iframe>
+    <iframe id="moz-iframe" class="hidden" mozbrowser></iframe>
+    <div id="offline-content" class="hidden">
+      <article class="slide">
+        <section id="description-section" class="slide-section">
+          <p class="slide-description txt-large" data-l10n-id="learn-use-firefox"></p>
+          <p class="slide-description txt-mid" data-l10n-id="please-connect-to-internet"></p>
+        </section>
+        <section id="button-section" class="slide-section">
+          <smart-button data-behavior="finish" class="slide-button primary" type="rounded-corner-text" data-l10n-id="ok"></smart-button>
+        </section>
+      </article>
+    </div>
   </body>
 
 </html>
diff --git a/tv_apps/fling-tutorial/js/index.js b/tv_apps/fling-tutorial/js/index.js
@@ -1,33 +1,50 @@
+/* global FTEWizard */
 (function (exports) {
 'use strict';
 
 window.addEventListener('load', function() {
-  var src = !navigator.onLine ?
-            'offline_content/index.html' :
-            'https://casttv.services.mozilla.com';
-
-  var mozIframe = document.querySelector('#mozIframe[mozbrowser]');
-  mozIframe.src = src;
-
-  mozIframe.addEventListener('mozbrowserloadend', () => {
-    mozIframe.focus();
-  });
-
-  // The call of window.close by content inside iframe(even with mozbrowser)
-  // is not allowed and does't not trigger the mozbrowserclose event.
-  // As a result, we use the mozbrowserlocationchange event to observe
-  // when user finishes the tutorial.
-  mozIframe.addEventListener('mozbrowserlocationchange', (e) => {
-    if (e.detail === mozIframe.src + '#finished') {
+  var offlineContent = document.querySelector('#offline-content');
+  var mozIframe = document.querySelector('#moz-iframe[mozbrowser]');
+
+  if (navigator.onLine) {
+    mozIframe.classList.remove('hidden');
+
+    mozIframe.addEventListener('mozbrowserloadend', () => {
+      mozIframe.focus();
+    });
+
+    // The call of window.close by content inside iframe(even with mozbrowser)
+    // is not allowed and does't not trigger the mozbrowserclose event.
+    // As a result, we use the mozbrowserlocationchange event to observe
+    // when user finishes the tutorial.
+    mozIframe.addEventListener('mozbrowserlocationchange', (e) => {
+      if (e.detail === mozIframe.src + '#finished') {
+        window.close();
+      }
+    });
+
+    // The mozbrowserclose event would be trrigered when content inside iframe
+    // is crashed. When crashed, let's just leave this app.
+    mozIframe.addEventListener('mozbrowserclose', () => {
       window.close();
-    }
-  });
-
-  // The mozbrowserclose event would be trrigered when content inside iframe
-  // is crashed. When crashed, let's just leave this app.
-  mozIframe.addEventListener('mozbrowserclose', () => {
-    window.close();
-  });
+    });
+
+    mozIframe.src = 'https://casttv.services.mozilla.com';
+  } else {
+
+    offlineContent.classList.remove('hidden');
+
+    var tutorial = new FTEWizard('flingTutorial');
+    tutorial.init({
+      container: offlineContent,
+      pageClass: 'slide',
+      buttonsClass: 'slide-button',
+      launchEveryTime: true,
+      onfinish: function () {
+        window.close();
+      }.bind(tutorial)
+    });
+  }
 });
 
 })(window);
diff --git a/tv_apps/fling-tutorial/js/offline_content/index.js b/tv_apps/fling-tutorial/js/offline_content/index.js
diff --git a/...locales/casting-tutorial.en-US.properties → ...l/locales/fling-tutorial.en-US.properties b/...locales/casting-tutorial.en-US.properties → ...l/locales/fling-tutorial.en-US.properties
diff --git a/tv_apps/fling-tutorial/offline_content/index.html b/tv_apps/fling-tutorial/offline_content/index.html
diff --git a/...yle/offline_content/images/background.png → ...ling-tutorial/style/images/background.png b/...yle/offline_content/images/background.png → ...ling-tutorial/style/images/background.png
diff --git a/tv_apps/fling-tutorial/style/index.css b/tv_apps/fling-tutorial/style/index.css
@@ -16,7 +16,13 @@ html, body {
   background-color: black;
 }
 
-#mozIframe {
+#moz-iframe,
+#offline-content {
   width: 100%;
   height: 100%;
 }
+
+#moz-iframe.hidden,
+#offline-content.hidden {
+  display: none;
+}
diff --git a/...-tutorial/style/offline_content/index.css → .../fling-tutorial/style/offline_content.css b/...-tutorial/style/offline_content/index.css → .../fling-tutorial/style/offline_content.css
@@ -1,29 +1,11 @@
-html {
-  font-size: 10px;
-  /* We have Fira Sans as default font in real device. But it isn't default in
-   * browser. That's the main reason this line is here.*/
-  font-family: "Fira Sans";
-  font-weight: 100;
-  font-style: italic;
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-  background: #000;
-}
-
-body {
+#offline-content {
   opacity: 1;
   color: #fff;
   background-image: url("images/background.png");
   transition: opacity 0.1s ease;
 }
 
-body.finish {
+#offline-content.finish {
   opacity: 0;
 }