xrextras updates for R15.2 (#151)

Author: jparismorgan

xrextras/src/loadingmodule/loading-module.css

@@ -45,40 +45,52 @@
   transform: translate(-50%, -50%);
 }
 
-#cameraPermissionsErrorApple {
+/* camera and micrphone permission related styles */
+#cameraPermissionsErrorApple, #microphonePermissionsErrorApple {
   background-color: #101118;
 }
 
-.xrextras-old-style #cameraPermissionsErrorApple {
+.xrextras-old-style #cameraPermissionsErrorApple, .xrextras-old-style #microphonePermissionsErrorApple {
   background-color: white;
 }
 
-#cameraPermissionsErrorAppleMessage {
+#cameraPermissionsErrorAppleMessage, #microphonePermissionsErrorAppleMessage {
   font-size: 1.75em;
   text-align: center;
+  max-width: 90vw;
   margin-top: 5vh;
+  margin-left: auto;
+  margin-right: auto;
   color: white;
 }
 
-.xrextras-old-style #cameraPermissionsErrorAppleMessage {
+.xrextras-old-style #cameraPermissionsErrorAppleMessage, .xrextras-old-style #microphonePermissionsErrorAppleMessage {
   color: #323232;
 }
 
-#cameraPermissionsErrorAppleArrow {
-  position: fixed;
-  top: 3%;
-  right: 1.5%;
-  height: 36px;
-}
-
-#cameraPermissionsErrorAppleReloadCamera {
+.permissionIconIos {
   display: block;
   margin: 0 auto;
   margin-top: 17vh;
-  max-width: 20vw;
+  text-align: center;
+}
+.permissionIconIos img {
+  height: 20vw;
+}
+.permissionIconIos img + img {
+  margin-left: 10vw;
 }
 
-#cameraPermissionsErrorAndroid {
+.bottom-message {
+  color: white;
+  padding: 0 5vw;
+  position: absolute;
+  bottom: 10vh;
+  text-align: center;
+  font-size: 1.25em;
+}
+
+#cameraPermissionsErrorAndroid, #microphonePermissionsErrorAndroid {
   padding: 2vh 0;
   display: flex;
   flex-direction: column;
@@ -88,10 +100,12 @@
   background-color: #101118;
 }
 
-.xrextras-old-style #cameraPermissionsErrorAndroid {
+.xrextras-old-style #cameraPermissionsErrorAndroid, .xrextras-old-style #microphonePermissionsErrorAndroid {
   background-color: white;
 }
 
+/* device motion permission related styles */
+
 #deviceMotionErrorApple {
   padding: 3vh 2vh;
   display: flex;
@@ -169,13 +183,13 @@
   background-color: #7611b7;
 }
 
-#cameraPermissionsCameraIcon {
+.permissionIcon {
   overflow: hidden;
   flex: 0 0 auto;
   margin-bottom: 2vh;
 }
 
-#cameraPermissionsCameraIcon img {
+.permissionIcon img {
   display: block;
   margin: 0 auto;
   height: 5vh;

xrextras/src/loadingmodule/loading-module.html

@@ -14,20 +14,22 @@
     Tap 'Allow' to access AR
   </div>
 
-  <!--Permission error, iOS-->
+  <!--Permission error, camera, iOS-->
   <div id="cameraPermissionsErrorApple" class="absolute-fill hidden">
-    <img class='foreground-image' id="cameraPermissionsErrorAppleReloadCamera"
-      src="//cdn.8thwall.com/web/img/loading/v2/camera.svg" />
+    <div class="permissionIconIos">
+      <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/camera.svg" />
+    </div>
     <p id="cameraPermissionsErrorAppleMessage">
-      Refresh the page to enable camera access for AR
+      Reload the page and enable camera access
     </p>
-    <img class='foreground-image' id="cameraPermissionsErrorAppleArrow"
-      src="//cdn.8thwall.com/web/img/almostthere/v2/xtra-arrow.svg" />
+    <div class='bottom-message'>
+      Ensure camera access is allowed in <span class='wk-app-name'></span> app settings
+    </div>
   </div>
 
-  <!--Permission error, Android-->
+  <!--Permission error, camera, Android-->
   <div id="cameraPermissionsErrorAndroid" class="absolute-fill hidden">
-    <div id="cameraPermissionsCameraIcon">
+    <div class="permissionIcon">
       <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/camera.svg" />
     </div>
     <div class="loading-error-header">Let's enable your camera</div>
@@ -70,6 +72,68 @@
     </div>
   </div>
 
+  <!--Permission error, microphone + camera, iOS-->
+  <div id="microphonePermissionsErrorApple" class="absolute-fill hidden">
+    <div class='permissionIconIos'>
+      <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/camera.svg" />
+      <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/microphone.svg" />
+    </div>
+    <p id="microphonePermissionsErrorAppleMessage">
+      Reload the page and enable camera + microphone access
+    </p>
+    <div class='bottom-message'>
+      Ensure camera + microphone access is allowed in <span class='wk-app-name'></span> app settings
+    </div>
+  </div>
+
+  <!--Permission error, microphone + camera, Android-->
+  <div id="microphonePermissionsErrorAndroid" class="absolute-fill hidden">
+    <div class="permissionIcon">
+      <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/microphone.svg" />
+    </div>
+    <div class="loading-error-header">Let's enable your microphone</div>
+    <ol class="loading-error-instructions">
+      <li>Tap the <img class='foreground-image' src="//cdn.8thwall.com/web/img/loading/v2/dots.svg"> in the top right
+      </li>
+      <li>Tap Settings</li>
+      <li class="chrome-instruction hidden">
+        <span class="highlight">Site settings</span>
+      </li>
+      <li class="chrome-instruction hidden">
+        <span class="highlight">Microphone</span>
+      </li>
+      <li class="chrome-instruction hidden">
+        <span class="highlight">Blocked</span>
+        <br>
+        <span class="microphone-instruction-block domain-view">apps.8thwall.com</span>
+      </li>
+      <li class="chrome-instruction hidden">
+        <span class="microphone-instruction-button">CLEAR & RESET</span>
+      </li>
+      <li class="chrome-instruction hidden">
+        <span class="highlight">Do the same for Camera</span>
+      </li>
+      <li class="samsung-instruction hidden">
+        <span class="highlight">Advanced</span>
+      </li>
+      <li class="samsung-instruction hidden">
+        <span class="highlight">Manage website data</span>
+      </li>
+      <li class="samsung-instruction hidden">
+        Press and hold<br>
+        <span class="microphone-instruction-block domain-view">apps.8thwall.com</span>
+      </li>
+      <li class="samsung-instruction hidden">
+        <span class="highlight" style="color: #1500ba">DELETE</span>
+      </li>
+    </ol>
+    <div class="loading-error-footer">
+      <img class='foreground-image' style="transform: rotate(130deg);"
+        src="//cdn.8thwall.com/web/img/loading/v2/reload.svg" />
+      Then, reload the page for AR!
+    </div>
+  </div>
+
   <div id="linkOutViewAndroid" class="absolute-fill hidden">
     <div class="error-text-outer-container">
       <div class="error-text-container error-margin-top-5">
@@ -120,12 +184,13 @@ <h1>Permissions were denied.</h1>
   <div id="motionPermissionsErrorApple" class="permission-error absolute-fill hidden">
     <h1>Permissions were denied.</h1>
     <p>You've prevented the page from accessing your motion sensors.</p>
-    <p>Please close out of Safari to reenable your motion sensors.</p>
+    <p>Please close <span class='wk-app-name'></span> app to reenable your motion sensors.</p>
   </div>
 
   <div id="cameraSelectionWorldTrackingError" class="permission-error absolute-fill hidden">
     <p><img height="75px" src="//cdn.8thwall.com/web/img/runtimeerror/v1/computer-voxel.png" class="floater"></p>
     <div class="error-text-header">Oops, something went wrong!</div>
     <p id="camera_mode_world_tracking_error"></p>
   </div>
+  <div id='debug-message' style='color:#eee; word-break: break-all; position:absolute; top:0'></div>
 </div>