151 feat youtube embed iframe (#176)

* youtube embed iframe temp commit

* Fixes styling and code cleanup

* lint

* Now clicking between the pause and settings button doesn't trigger the parent

* use modest branding (less yt logos)

* Stop playing the video once there's a navigation event

* Make sure the iframe is unmounted on any navigation event

* fixes tests

* lint

src/state/models/navigation.ts

@@ -1,3 +1,4 @@
+import {RootStoreModel} from './root-store'
 import {makeAutoObservable} from 'mobx'
 import {TABS_ENABLED} from '../../build-flags'
 import {segmentClient} from '../../lib/segmentClient'
@@ -228,8 +229,9 @@ export class NavigationModel {
   ]
   tabIndex = 0
 
-  constructor() {
+  constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {
+      rootStore: false,
       serialize: false,
       hydrate: false,
     })
@@ -263,6 +265,7 @@ export class NavigationModel {
   // =
 
   navigate(url: string, title?: string) {
+    this.rootStore.emitNavigation()
     this.tab.navigate(url, title)
   }
 
@@ -300,6 +303,7 @@ export class NavigationModel {
   // fixed tab helper function
   // -prf
   switchTo(purpose: TabPurpose, reset: boolean) {
+    this.rootStore.emitNavigation()
     switch (purpose) {
       case TabPurpose.Notifs:
         this.tabIndex = 2

src/state/models/root-store.ts

@@ -21,8 +21,8 @@ export class RootStoreModel {
   agent: AtpAgent
   log = new LogModel()
   session = new SessionModel(this)
-  nav = new NavigationModel()
-  shell = new ShellUiModel()
+  nav = new NavigationModel(this)
+  shell = new ShellUiModel(this)
   me = new MeModel(this)
   onboard = new OnboardModel()
   profiles = new ProfilesViewModel(this)
@@ -158,6 +158,14 @@ export class RootStoreModel {
     DeviceEventEmitter.emit('session-dropped')
   }
 
+  onNavigation(handler: () => void): EmitterSubscription {
+    return DeviceEventEmitter.addListener('navigation', handler)
+  }
+
+  emitNavigation() {
+    DeviceEventEmitter.emit('navigation')
+  }
+
   // background fetch
   // =
   // - we use this to poll for unread notifications, which is not "ideal" behavior but

src/state/models/shell-ui.ts

@@ -1,3 +1,4 @@
+import {RootStoreModel} from './root-store'
 import {makeAutoObservable} from 'mobx'
 import {ProfileViewModel} from './profile-view'
 import {isObj, hasProp} from '../lib/type-guards'
@@ -113,8 +114,12 @@ export class ShellUiModel {
   isComposerActive = false
   composerOpts: ComposerOpts | undefined
 
-  constructor() {
-    makeAutoObservable(this, {serialize: false, hydrate: false})
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(this, {
+      serialize: false,
+      rootStore: false,
+      hydrate: false,
+    })
   }
 
   serialize(): unknown {
@@ -152,6 +157,7 @@ export class ShellUiModel {
       | ReportAccountModal
       | DeleteAccountModal,
   ) {
+    this.rootStore.emitNavigation()
     this.isModalActive = true
     this.activeModal = modal
   }
@@ -162,6 +168,7 @@ export class ShellUiModel {
   }
 
   openLightbox(lightbox: ProfileImageLightbox | ImagesLightbox) {
+    this.rootStore.emitNavigation()
     this.isLightboxActive = true
     this.activeLightbox = lightbox
   }
@@ -172,6 +179,7 @@ export class ShellUiModel {
   }
 
   openComposer(opts: ComposerOpts) {
+    this.rootStore.emitNavigation()
     this.isComposerActive = true
     this.composerOpts = opts
   }