Oculus Browser: new instructions, icons, capable headsets, renamed fr…

…om Oculus Carmel (fixes #263, #201, #200, #202)

public/ROUTER

@@ -179,32 +179,42 @@
 
 302   /carmel  /oculus_carmel
 
-302   /oculus-carmel  /oculus_carmel
+302   /oculus-browser  /oculus_browser
 
-302   /oculus-carmel/ford  /oculus_carmel/ford
-302   /oculus-carmel/fog  /oculus_carmel/fog
-302   /oculus-carmel/kadjar  /oculus_carmel/kadjar
+302   /oculus-carmel  /oculus_browser
 
-302   /carmel/ford  /oculus_carmel/ford
-302   /carmel/fog  /oculus_carmel/fog
-302   /carmel/kadjar  /oculus_carmel/kadjar
+302   /oculus-carmel/ford  /oculus_browser/ford
+302   /oculus-carmel/fog  /oculus_browser/fog
+302   /oculus-carmel/kadjar  /oculus_browser/kadjar
 
-302   /oculus_carmel/ford  ovrweb:http://static.oculus.com/webvr/production/97f2fc11c8a96114547e8edc8453878b5f9c5653/Samples/FordDemo/index.html
-302   /oculus_carmel/fog  ovrweb:http://aframe.io/aframe/examples/showcase/spheres-and-fog/
-302   /oculus_carmel/kadjar  ovrweb:http://kadjar.littleworkshop.fr/
+302   /oculus-browser/ford  /oculus_browser/ford
+302   /oculus-browser/fog  /oculus_browser/fog
+302   /oculus-browser/kadjar  /oculus_browser/kadjar
+
+302   /oculus/ford  /oculus_browser/ford
+302   /oculus/fog  /oculus_browser/fog
+302   /oculus/kadjar  /oculus_browser/kadjar
+
+302   /carmel/ford  /oculus_browser/ford
+302   /carmel/fog  /oculus_browser/fog
+302   /carmel/kadjar  /oculus_browser/kadjar
+
+302   /oculus_carmel/ford  https://static.oculus.com/webvr/production/97f2fc11c8a96114547e8edc8453878b5f9c5653/Samples/FordDemo/index.html
+302   /oculus_carmel/fog  https://aframe.io/aframe/examples/showcase/spheres-and-fog/
+302   /oculus_carmel/kadjar  http://kadjar-vr.littleworkshop.fr/
 
 302   /chat  /slack
 
 302   /browsers  /#browsers
 302   /browsers/  /#browsers
 
+302   /Browsers  /browsers
+302   /Browsers/  /browsers/
+
 302   /posters  https://github.com/WebVRRocks/posters
 302   /poster  https://raw.githubusercontent.com/WebVRRocks/posters/master/rocks-webvr-browsers.png
 302   /poster.png  https://raw.githubusercontent.com/WebVRRocks/posters/master/rocks-webvr-browsers.png
 
-302   /Browsers  /browsers
-302   /Browsers/  /browsers/
-
 302   /compat/submit  https://airtable.com/shrGtVbhfoadJ47c8
 302   /compat  /compat/submit
 302   /compatability/submit  /compat/submit

public/_helpers.html

@@ -46,7 +46,7 @@
 {% includeData 'chromium.json' as chromium %}
 {% includeData 'firefox.json' as firefox %}
 {% includeData 'samsung_internet.json' as samsung_internet %}
-{% includeData 'oculus_carmel.json' as oculus_carmel %}
+{% includeData 'oculus_browser.json' as oculus_browser %}
 {% includeData 'chrome_for_android.json' as chrome_for_android %}
 {% includeData 'microsoft_edge.json' as microsoft_edge %}
 {% includeData 'servo.json' as servo %}
@@ -74,7 +74,7 @@
   chromium: chromium,
   firefox: firefox,
   samsung_internet: samsung_internet,
-  oculus_carmel: oculus_carmel,
+  oculus_browser: oculus_browser,
   chrome_for_android: chrome_for_android,
   microsoft_edge: microsoft_edge,
   servo: servo
@@ -98,6 +98,45 @@
   windows_mixed_reality: windows_mixed_reality
 } %}
 
+{% set phones = {
+  "samsung_galaxy_note8": {
+    "name": "Samsung Galaxy Note8",
+    "about": "https://www.samsung.com/global/galaxy/galaxy-note8/"
+  },
+  "samsung_galaxy_s8": {
+    "name": "Samsung Galaxy S8",
+    "about": "https://www.samsung.com/global/galaxy/gallery/galaxy-s8/"
+  },
+  "samsung_galaxy_s8_plus": {
+    "name": "Samsung Galaxy S8+",
+    "about": "https://www.samsung.com/global/galaxy/gallery/galaxy-s8/"
+  },
+  "samsung_galaxy_s7": {
+    "name": "Samsung Galaxy S7",
+    "about": "https://www.samsung.com/global/galaxy/gallery/galaxy-s7/"
+  },
+  "samsung_galaxy_s7_edge": {
+    "name": "Samsung Galaxy S7 Edge",
+    "about": "https://www.samsung.com/global/galaxy/gallery/galaxy-s7/"
+  },
+  "samsung_galaxy_note5": {
+    "name": "Samsung Galaxy Note5",
+    "about": "http://www.samsung.com/global/galaxy/galaxy-note5/"
+  },
+  "samsung_galaxy_s6_edge_plus": {
+    "name": "Samsung Galaxy S6 Edge+",
+    "about": "http://www.samsung.com/global/galaxy/galaxy-s6-edge-plus/"
+  },
+  "samsung_galaxy_s6": {
+    "name": "Samsung Galaxy S6",
+    "about": "http://www.samsung.com/global/galaxy/galaxys6/galaxy-s6/"
+  },
+  "samsung_galaxy_s6_edge": {
+    "name": "Samsung Galaxy S6 Edge",
+    "about": "http://www.samsung.com/global/galaxy/galaxys6/galaxy-s6-edge/"
+  }
+} %}
+
 {% macro browser_platform_support (browser, headset, os) %}
   {% set support = browser.platforms[headset][os] %}
   {% if support === 'supported' %}

public/_layout_browser.html

@@ -1,4 +1,4 @@
-{% from '_helpers.html' import author_item, browser_item, browsers, bugs_bar, compat_report_row, demo_item, headsets, site_title, youtube %}
+{% from '_helpers.html' import author_item, browser_item, browsers, bugs_bar, compat_report_row, demo_item, headsets, phones, site_title, youtube %}
 {% set browser = browsers[slug] %}
 {% set page = slug + '.html' %}
 <!doctype html>
@@ -87,6 +87,23 @@ <h2><a href="#headsets">Supported headsets</a></h2>
           </section>
         {% endblock %}
 
+        {% block phones_block %}
+          {% if browser.phones %}
+            <section id="phones" class="section phones" data-section="phones">
+              <h2><a href="#phones">Supported phones</a></h2>
+              {% block phones %}
+                <ul class="bullets-light">
+                  {% for slug in browser.phones -%}
+                    <li><span><a href="{{ phones[slug].about }}" itemprop="aboutUrl">{{ phones[slug].name }}</a></span></li>
+                  {%- endfor %}
+                </ul>
+              {% endblock %}
+            </section>
+          {% else %}
+            <div id="phones"></div>
+          {% endif %}
+        {% endblock %}
+
         {% block demos_block %}
           <section id="demos" class="section demos" data-section="demos">
             <h2><a href="#demos">Demos</a></h2>
@@ -146,6 +163,15 @@ <h2><a href="#releases">Latest version</a></h2>
                     {% endfor %}
                   </dd>
                 {% endif %}
+                {% if browser.showPhones === true %}
+                  <dt class="browser-supported-phones">Supported phones</dt>
+                  <dd>
+                    {% for slug in browser.phones %}
+                      <a href="{{ phones[slug].about }}">{{ phones[slug].name }}</a>
+                      {%- if loop.revindex > 1 %},{% endif %}
+                    {% endfor %}
+                  </dd>
+                {% endif %}
                 {% if browser.showOperatingSystem !== false %}
                   <dt class="browser-system-requirements">System requirements</dt>
                   <dd>

public/index.html

@@ -54,7 +54,7 @@ <h1><a href="#browsers">WebVR Browsers</a></h1>
             {{ browser_item('chrome_for_android') }}
             {{ browser_item('chromium') }}
             {{ browser_item('samsung_internet') }}
-            {{ browser_item('oculus_carmel') }}
+            {{ browser_item('oculus_browser') }}
             {{ browser_item('servo') }}
           </ul>
         </section>

public/media/css/main.css

@@ -356,6 +356,10 @@ h1.page-heading {
   min-width: 70px;
 }
 
+[data-layout~="oculus_browser"] .browser-icon {
+  border-radius: 6px;
+}
+
 .headset-icon {
   display: inline-block;
   margin-bottom: 1rem;
@@ -1576,16 +1580,17 @@ html[data-layout~="headset"][data-layout~="htc_vive"] .edit-page a:hover {
     color: rgba(151,126,254,1);
   }
 
-  .matrix [itemprop="browser"][data-slug="oculus_carmel"] [itemprop="image"] {
+  .matrix [itemprop="browser"][data-slug="oculus_browser"] [itemprop="image"] {
+    background-color: rgb(33,33,35);
     border-color: rgba(60,61,62,.3);
   }
-  .matrix [itemprop="browser"][data-slug="oculus_carmel"]:hover [itemprop="image"] {
+  .matrix [itemprop="browser"][data-slug="oculus_browser"]:hover [itemprop="image"] {
     border-color: rgba(60,61,62,.6);
   }
-  .matrix [itemprop="browser"][data-slug="oculus_carmel"] [itemprop="url"] {
+  .matrix [itemprop="browser"][data-slug="oculus_browser"] [itemprop="url"] {
     color: rgba(60,61,62,.8);
   }
-  .matrix [itemprop="browser"][data-slug="oculus_carmel"] [itemprop="url"]:hover {
+  .matrix [itemprop="browser"][data-slug="oculus_browser"] [itemprop="url"]:hover {
     color: rgba(60,61,62,1);
   }
 

public/oculus_carmel.html → public/oculus_browser.html

@@ -1,32 +1,30 @@
-{% set slug = 'oculus_carmel' %}
+{% set slug = 'oculus_browser' %}
 {% extends '_layout_browser.html' %}
 
-{% set browser = browsers.oculus_carmel %}
-
 {% block instructions %}
   <ol class="bullets-light">
     <li>
       <span>
-        <p>Search for and <strong>install <a href="{{ browser.url }}">Carmel Developer Preview</a></strong> from the <strong>Oculus Gear VR store</strong>.</p>
-        <figure class="media-outlined">
-          <img src="oculus_carmel/app.png" width="200" alt="Oculus Carmel installation screen">
-          <figcaption>Installation screen</figcaption>
-        </figure>
+        Insert your <a href="#phones">supported Android phone</a> into the <a href="{{ headsets.samsung_gear_vr.about }}">Samsung Gear VR</a> headset.
+        <ul>
+          <li>
+            <span>If prompted, eject your phone and proceed to complete the Gear VR installation or upgrade process.</span></li>
+          </ul>
       </span>
     </li>
     <li>
       <span>
-        Launch <strong>Carmel Developer Preview</strong> from your Gear VR Library.
+        Launch the <strong>Oculus Browser</strong> from the <strong>Oculus Home</strong> lobby.
       </span>
     </li>
     <li>
       <span>
-        <p><stong>Enjoy the included WebVR demos!</stong></p>
-        <figure class="media-outlined">
-          <img src="https://dl.airtable.com/ZtmdSF5gRBqzuICpspK6_full_12386444_1799525440318007_1635011178193223680_n.jpg" width="300" alt="Oculus Carmel demos">
-          <figcaption>WebVR demos from Carmel main lobby space</figcaption>
-        </figure>
+        <p>Load <a href="https://aframe.io/" rel="noreferrer noopener">aframe.io</a> or <a href="https://webvr.rocks/" rel="noreferrer noopener">webvr.rocks</a></p>
       </span>
+      <li>
+        <span>
+          Enjoy WebVR content!
+        </span>
     </li>
   </ol>
 {% endblock %}
@@ -40,6 +38,7 @@
 
 {% block links %}
   <ul class="bullets-light">
+    <li><span><a href="https://www.oculus.com/blog/mobile-vr-is-better-than-ever/">Mobile VR Is Better than Ever</a></span></li>
     <li><span><a href="https://developer.oculus.com/webvr/">Oculus WebVR Developer Center</a></span></li>
     <li><span><a href="https://developer3.oculus.com/documentation/vrweb/latest/">Oculus WebVR Guide</a></span></li>
     <li><span><a href="https://developer3.oculus.com/documentation/vrweb/latest/concepts/carmel-launching-content/">Launching WebVR content in Carmel</a></span></li>

public/oculus_carmel.json → public/oculus_browser.json

@@ -1,31 +1,48 @@
 {
   "@context": "http://schema.org",
   "@type": "MobileApplication",
-  "name": "Oculus Carmel",
-  "slug": "oculus_carmel",
-  "description": "Oculus' VR browser for Gear VR",
-  "description_html": "<a href=\"https://www.oculus.com/\">Oculus</a>&rsquo; <a href=\"https://www.oculus.com/experiences/gear-vr/1290985657630933/\">VR browser</a> for <a href=\"https://www.samsung.com/global/galaxy/gear-vr/\">Gear VR</a>",
+  "name": "Oculus Browser",
+  "slug": "oculus_browser",
+  "description": "Oculus' VR browser for Samsung Gear VR",
+  "description_html": "<a href=\"https://www.oculus.com/\" rel=\"noreferrer noopener\">Oculus</a>&rsquo; <a href=\"https://www.oculus.com/experiences/gear-vr/1290985657630933/\" rel=\"noreferrer noopener\">VR browser</a> for <a href=\"https://www.samsung.com/global/galaxy/gear-vr/\" rel=\"noreferrer noopener\">Samsung Gear VR</a>",
   "operatingSystem": "Android 5.1+",
   "headsets": [
     "samsung_gear_vr"
   ],
+  "phones": [
+    "samsung_galaxy_note8",
+    "samsung_galaxy_s8",
+    "samsung_galaxy_s8_plus",
+    "samsung_galaxy_s7",
+    "samsung_galaxy_s7_edge",
+    "samsung_galaxy_note5",
+    "samsung_galaxy_s6_edge_plus",
+    "samsung_galaxy_s6",
+    "samsung_galaxy_s6_edge"
+  ],
+  "showPhones": true,
   "showProcessorRequirements": false,
   "processorRequirements": "",
-  "logo": "/oculus_carmel/icon.png",
-  "image": "/oculus_carmel/cover.png",
-  "url": "https://www.oculus.com/experiences/gear-vr/1290985657630933/",
-  "about": "/oculus_carmel",
-  "downloadUrl": "https://www.oculus.com/experiences/gear-vr/1290985657630933/",
-  "landingUrl": "https://www.oculus.com/experiences/gear-vr/1290985657630933/",
+  "logo": "/oculus_browser/icon.png",
+  "image": "/oculus_browser/cover.png",
+  "url": "https://www.oculus.com/experiences/gear-vr/1257988667656584/",
+  "about": "/oculus_browser",
+  "downloadUrl": "https://www.oculus.com/experiences/gear-vr/1257988667656584/",
+  "landingUrl": "https://www.oculus.com/experiences/gear-vr/1257988667656584/",
   "sameAs": [
-    "https://webvr.rocks/oculus_carmel",
+    "https://webvr.rocks/oculus_browser",
     "https://developer.oculus.com/webvr/"
   ],
   "showDateReleased": true,
   "showFileSize": true,
-  "softwareVersion": "0.2-004016",
+  "softwareVersion": "4.0.0.19",
   "releases": {
-    "latest": {
+    "4.0.0.19": {
+      "url": "https://www.oculus.com/experiences/gear-vr/1257988667656584/",
+      "fileSize": "79.83 MB",
+      "version": "4.0.0.19"
+    },
+    "0.2-004016": {
       "url": "https://www.oculus.com/experiences/gear-vr/1290985657630933/",
       "fileSize": "87.74 MB",
       "version": "0.2-004016"