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

__tests__/lib/string.test.ts

@@ -1,3 +1,4 @@
+import {getYoutubeVideoId} from './../../src/lib/strings'
 import {
   extractEntities,
   detectLinkables,
@@ -487,3 +488,29 @@ describe('toShareUrl', () => {
     }
   })
 })
+
+describe('getYoutubeVideoId', () => {
+  it(' should return undefined for invalid youtube links', () => {
+    expect(getYoutubeVideoId('')).toBeUndefined()
+    expect(getYoutubeVideoId('https://www.google.com')).toBeUndefined()
+    expect(getYoutubeVideoId('https://www.youtube.com')).toBeUndefined()
+    expect(
+      getYoutubeVideoId('https://www.youtube.com/channelName'),
+    ).toBeUndefined()
+    expect(
+      getYoutubeVideoId('https://www.youtube.com/channel/channelName'),
+    ).toBeUndefined()
+  })
+
+  it('getYoutubeVideoId should return video id for valid youtube links', () => {
+    expect(getYoutubeVideoId('https://www.youtube.com/watch?v=videoId')).toBe(
+      'videoId',
+    )
+    expect(
+      getYoutubeVideoId(
+        'https://www.youtube.com/watch?v=videoId&feature=share',
+      ),
+    ).toBe('videoId')
+    expect(getYoutubeVideoId('https://youtu.be/videoId')).toBe('videoId')
+  })
+})

__tests__/state/models/navigation.test.ts

@@ -1,11 +1,16 @@
+import {RootStoreModel} from './../../../src/state/models/root-store'
 import {NavigationModel} from './../../../src/state/models/navigation'
 import * as flags from '../../../src/build-flags'
+import AtpAgent from '@atproto/api'
+import {DEFAULT_SERVICE} from '../../../src/state'
 
 describe('NavigationModel', () => {
   let model: NavigationModel
+  let rootStore: RootStoreModel
 
   beforeEach(() => {
-    model = new NavigationModel()
+    rootStore = new RootStoreModel(new AtpAgent({service: DEFAULT_SERVICE}))
+    model = new NavigationModel(rootStore)
     model.setTitle('0-0', 'title')
   })
 

__tests__/state/models/shell-ui.test.ts

@@ -3,12 +3,17 @@ import {
   ImagesLightbox,
   ShellUiModel,
 } from './../../../src/state/models/shell-ui'
+import {RootStoreModel} from '../../../src/state'
+import AtpAgent from '@atproto/api'
+import {DEFAULT_SERVICE} from '../../../src/state'
 
 describe('ShellUiModel', () => {
   let model: ShellUiModel
+  let rootStore: RootStoreModel
 
   beforeEach(() => {
-    model = new ShellUiModel()
+    rootStore = new RootStoreModel(new AtpAgent({service: DEFAULT_SERVICE}))
+    model = new ShellUiModel(rootStore)
   })
 
   afterAll(() => {