feat(app): add toggle for AR

packages/phoenix-ng/projects/phoenix-ui-components/src/components/phoenix-ui.module.ts

@@ -43,6 +43,7 @@ import {
   AnimateCameraComponent,
   AnimateEventComponent,
   VrToggleComponent,
+  ArToggleComponent,
   SSModeComponent,
   PerformanceToggleComponent,
   ShareLinkComponent,
@@ -87,6 +88,7 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   AnimateCameraComponent,
   AnimateEventComponent,
   VrToggleComponent,
+  ArToggleComponent,
   SSModeComponent,
   PerformanceToggleComponent,
   LoaderComponent,

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.html

@@ -0,0 +1,10 @@
+<app-menu-toggle
+  [disabled]="!arSupported"
+  [active]="arActive"
+  icon="ar"
+  (click)="arSupported && toggleAr()"
+  [tooltip]="
+    arSupported ? (arActive ? 'Exit AR' : 'Enter AR') : 'AR not supported'
+  "
+>
+</app-menu-toggle>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArToggleComponent } from './ar-toggle.component';
+
+describe('ArToggleComponent', () => {
+  let component: ArToggleComponent;
+  let fixture: ComponentFixture<ArToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ArToggleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ar-toggle/ar-toggle.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { EventDisplayService } from '../../../services/event-display.service';
+import { ARManager } from 'phoenix-event-display';
+
+@Component({
+  selector: 'app-ar-toggle',
+  templateUrl: './ar-toggle.component.html',
+  styleUrls: ['./ar-toggle.component.scss'],
+})
+export class ArToggleComponent {
+  arSupported: boolean = false;
+  arActive: boolean = false;
+
+  constructor(private eventDisplay: EventDisplayService) {
+    // NOTE: WebXR needs secure HTTPS context
+    if ('xr' in navigator) {
+      (navigator as any)?.xr
+        ?.isSessionSupported?.(ARManager.SESSION_TYPE)
+        .then((supported: boolean) => {
+          if (supported) {
+            this.arSupported = true;
+          }
+        });
+    } // else AR not supported
+  }
+
+  toggleAr() {
+    // If toggling AR on
+    if (!this.arActive) {
+      this.eventDisplay.initAR(() => {
+        this.arActive = false;
+        // Disable renderer XR and remove animation loop
+        this.eventDisplay.endAR();
+      });
+      this.arActive = true;
+    } else {
+      this.eventDisplay.endAR();
+      this.arActive = false;
+    }
+  }
+}

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/index.ts

@@ -22,6 +22,7 @@ export * from './tree-menu/tree-menu.component';
 export * from './tree-menu/tree-menu-item/tree-menu-item.component';
 export * from './view-options/view-options.component';
 export * from './vr-toggle/vr-toggle.component';
+export * from './ar-toggle/ar-toggle.component';
 export * from './zoom-controls/zoom-controls.component';
 export * from './ss-mode/ss-mode.component';
 export * from './performance-toggle/performance-toggle.component';

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/ui-menu.component.html

@@ -56,6 +56,9 @@
     <!-- Toggle for VR -->
     <app-vr-toggle></app-vr-toggle>
 
+    <!-- Toggle for AR -->
+    <app-ar-toggle></app-ar-toggle>
+
     <!-- Toggle for screenshot mode -->
     <app-ss-mode></app-ss-mode>