Fix editor mobile file open (#2770)

* switched upload buttons to plain input

* fixed test

* removed file_modal and USDZ support

* removed last vestigages of USDZ

* remove old imports

packages/space-opera/src/app.ts

@@ -30,7 +30,6 @@ import './components/model_viewer_preview/model_viewer_preview.js';
 import './components/animation_controls/animation_controls.js';
 import './components/camera_settings/camera_settings.js';
 import './components/model_viewer_snippet/components/download_button.js';
-import './components/file_modal/file_modal.js';
 import './components/hotspot_panel/hotspot_panel.js';
 import './components/ibl_selector/ibl_selector.js';
 import './components/materials_panel/materials_panel.js';

packages/space-opera/src/components/ibl_selector/ibl_selector.ts

@@ -22,16 +22,14 @@ import '../shared/slider_with_input/slider_with_input.js';
 import '../shared/checkbox/checkbox.js';
 import '@polymer/paper-item';
 import '@material/mwc-button';
-import '../file_modal/file_modal.js';
 
 import {customElement, html, internalProperty, query} from 'lit-element';
 
 import {reduxStore} from '../../space_opera_base.js';
-import {iblSelectorStyles} from '../../styles.css.js';
+import {fileModalStyles, iblSelectorStyles} from '../../styles.css.js';
 import {ModelViewerConfig, State} from '../../types.js';
 import {dispatchEnvrionmentImage, dispatchExposure, dispatchShadowIntensity, dispatchShadowSoftness, dispatchUseEnvAsSkybox, getConfig} from '../config/reducer.js';
 import {ConnectedLitElement} from '../connected_lit_element/connected_lit_element.js';
-import {FileModalElement} from '../file_modal/file_modal.js';
 import {dispatchSetEnvironmentName} from '../relative_file_paths/reducer.js';
 import {CheckboxElement} from '../shared/checkbox/checkbox.js';
 import {Dropdown} from '../shared/dropdown/dropdown.js';
@@ -48,14 +46,14 @@ const ACCEPT_IMAGE_TYPE = IMAGE_MIME_TYPES.join(',') + ',.hdr';
  */
 @customElement('me-ibl-selector')
 export class IblSelector extends ConnectedLitElement {
-  static styles = iblSelectorStyles;
+  static styles = [iblSelectorStyles, fileModalStyles];
 
   @internalProperty() config: ModelViewerConfig = {};
   @internalProperty() environmentImages: EnvironmentImage[] = [];
 
   @query('me-slider-with-input#exposure')
   exposureSlider!: SliderWithInputElement;
-  @query('me-file-modal#imageUpload') imageFileModal!: FileModalElement;
+  @query('input#imageUpload') fileInput!: HTMLInputElement;
   @query('me-checkbox#skybox') skyboxCheckbox!: CheckboxElement;
 
   @query('me-slider-with-input#shadow-intensity')
@@ -118,8 +116,8 @@ export class IblSelector extends ConnectedLitElement {
   }
 
   // TODO:: Add test to this.
-  async openFileModal() {
-    const files = await this.imageFileModal.open();
+  async onUploadHDR() {
+    const files = this.fileInput.files;
 
     if (!files) {
       return;
@@ -158,11 +156,11 @@ export class IblSelector extends ConnectedLitElement {
             environmentImage => html`<paper-item value=${
                 environmentImage.uri}>${environmentImage.name}</paper-item>`)}
             </me-dropdown>
-            <mwc-button 
-              class="UploadButton"
-              style="align-self: center;"
-              id="uploadButton" unelevated
-              icon="file_upload" @click="${this.openFileModal}">HDR</mwc-button>
+            <mwc-button unelevated label="HDR" icon="file_upload" class="UploadButton UploadHDRButton">
+              <label for="imageUpload" class="FileInputLabel"/>
+            </mwc-button>
+            <input type="file" id="imageUpload" accept=${
+        ACCEPT_IMAGE_TYPE} @change="${this.onUploadHDR}"/>
           </div>
           <me-section-row class="Row" label="Exposure">
             <me-slider-with-input min="0" max="2" step="0.01" id="exposure"
@@ -195,9 +193,6 @@ export class IblSelector extends ConnectedLitElement {
               value="${this.config.shadowSoftness ?? DEFAULT_SHADOW_SOFTNESS}">
             </me-slider-with-input>
           </me-section-row>
-
-          <me-file-modal id="imageUpload" accept=${ACCEPT_IMAGE_TYPE}>
-          </me-file-modal>
         </div>
       </me-expandable-tab>
     `;

packages/space-opera/src/components/mobile_view/components/mobile_expandable_section.ts

@@ -40,9 +40,6 @@ export class MobileExpanadableSection extends LitElement {
   @property({type: Function}) onSelectArMode?: Function;
   @property() arConfig?: ArConfigState;
 
-  @property({type: Boolean}) iosAndNoUsdz?: boolean;
-  @property({type: Function}) onUploadUSDZ?: Function;
-
   @query('me-checkbox#ar') arCheckbox!: CheckboxElement;
   @query('me-checkbox#ar-modes') arModesCheckbox!: CheckboxElement;
 
@@ -115,25 +112,6 @@ export class MobileExpanadableSection extends LitElement {
     `;
   }
 
-  renderIos() {
-    const needUsdzButton = this.iosAndNoUsdz ? '#DC143C' : '#4285F4';
-    const uploadUsdzText = this.iosAndNoUsdz ? html`
-    <div style="color: #DC143C; margin-top: 5px;">
-      Upload a .usdz to view model in AR on an iOS device.
-    </div>` :
-                                               html``
-    return html`
-    <div style="font-size: 14px; font-weight: 500; margin: 16px 0px 10px 0px;">
-      To enable AR on iOS, upload:
-    </div> 
-    <mwc-button unelevated icon="file_upload" @click=${this.onUploadUSDZ} 
-      style="--mdc-theme-primary: ${needUsdzButton}">
-      USDZ / REALITY
-    </mwc-button>
-    ${uploadUsdzText}
-    `;
-  }
-
   render() {
     return html`
       ${!this.isDeployed ? this.renderDeployButton() : html``}

packages/space-opera/src/components/mobile_view/mobile_view.ts

@@ -29,7 +29,7 @@ import {styles as hotspotStyles} from '../utils/hotspot/hotspot.css.js';
 
 import {styles as mobileStyles} from './styles.css.js';
 import {EditorUpdates, MobilePacket, MobileSession, URLs} from './types.js';
-import {envToSession, getMobileOperatingSystem, getPingUrl, getRandomInt, getSessionUrl, getWithTimeout, gltfToSession, post, posterToSession, usdzToSession} from './utils.js';
+import {envToSession, getMobileOperatingSystem, getPingUrl, getRandomInt, getSessionUrl, getWithTimeout, gltfToSession, post, posterToSession} from './utils.js';
 
 const TOAST_TIME = 3000;  // 3s
 
@@ -51,9 +51,7 @@ export class MobileView extends LitElement {
   @query('model-viewer') readonly modelViewer!: ModelViewerElement;
   @internalProperty() modelViewerUrl: string = '';
   @internalProperty() posterUrl: string = '';
-  @internalProperty() iosUrl: string = '';
   @internalProperty() currentBlob?: Blob;
-  @internalProperty() usdzBlob?: Blob;
 
   @internalProperty() editorUrls?: URLs;
 
@@ -75,10 +73,6 @@ export class MobileView extends LitElement {
   @internalProperty() sessionUrl = getSessionUrl(this.pipeId, this.sessionId);
   @internalProperty() sessionOs = getMobileOperatingSystem();
 
-  get needIosSrc(): boolean {
-    return this.sessionOs === 'iOS' && this.iosUrl.length <= 1;
-  }
-
   updateState(snippet: ModelViewerSnippetState, urls: URLs) {
     this.editorUrls = urls;
     this.hotspots = snippet.hotspots;
@@ -103,9 +97,7 @@ export class MobileView extends LitElement {
           this.modelViewer.shadowRoot!.getElementById('default-ar-button')!;
       arButton.addEventListener('click', () => {
         try {
-          if (this.sessionOs === 'iOS') {
-            post(this.usdzBlob!, this.iosUrl);
-          } else {
+          if (this.sessionOs === 'Android') {
             post(this.currentBlob!, this.modelViewerUrl);
           }
         } catch (error) {
@@ -115,20 +107,6 @@ export class MobileView extends LitElement {
     }
   }
 
-  // Need to fetch the USDZ first so we can POST the USDZ again if
-  // someone closes quick-look and then chooses to reopen it.
-  async waitForUSDZ(usdzId: number, iosSrcIsReality: boolean) {
-    const usdzUrl =
-        usdzToSession(this.pipeId, this.sessionId, usdzId, iosSrcIsReality);
-    const response = await fetch(usdzUrl);
-    if (response.ok) {
-      this.usdzBlob = await response.blob();
-      this.iosUrl = usdzUrl;
-    } else {
-      console.error('Error:', response);
-    }
-  }
-
   // We set modelViewerUrl instead of directly fetching it because
   // scene-viewer requires the same url from the current model-viewer state,
   // and we need to make a POST request to that URL when scene-viewer is
@@ -154,10 +132,6 @@ export class MobileView extends LitElement {
       this.envImageUrl =
           envToSession(this.pipeId, this.sessionId, updatedContent.envIsHdr);
     }
-    if (updatedContent.iosChanged) {
-      await this.waitForUSDZ(
-          updatedContent.usdzId, updatedContent.iosSrcIsReality);
-    }
 
     this.overlay!.style.display = 'none';
   }
@@ -166,7 +140,6 @@ export class MobileView extends LitElement {
     let body = json.gltfChanged ? 'gltf model, ' : '';
     body = json.envChanged ? body.concat('environment image, ') : body;
     body = json.stateChanged ? body.concat('snippet, ') : body;
-    body = json.iosChanged ? body.concat('usdz model, ') : body;
     body = body.slice(0, body.length - 2).concat('.');
     this.toastBody = `Loading ${body}`;
     this.toastClassName = 'show';
@@ -209,14 +182,6 @@ export class MobileView extends LitElement {
     }
   }
 
-  renderIosMessage() {
-    return html`
-    <div class="ios-message">
-      Upload a .usdz or .reality file to view your model in AR.
-    </div>
-    `
-  }
-
   render() {
     const config = {...this.config};
     const skyboxImage = (config.useEnvAsSkybox && this.editorUrls?.env) ?
@@ -235,7 +200,6 @@ export class MobileView extends LitElement {
           src=${this.modelViewerUrl}
           ?ar=${ifDefined(!!this.arConfig.ar)}
           ar-modes=${ifDefined(this.arConfig!.arModes)}
-          ios-src=${ifDefined(this.iosUrl)}
           ?autoplay=${!!config.autoplay}
           ?auto-rotate=${!!config.autoRotate}
           ?camera-controls=${!!config.cameraControls}
@@ -262,7 +226,6 @@ export class MobileView extends LitElement {
     <div class="${this.toastClassName}" id="snackbar-mobile">
       ${this.toastBody}
     </div>
-    ${this.needIosSrc ? this.renderIosMessage() : html``}
     `;
   }