Added video embed directive

app/src/common/directives/contentSectionsInput/types/sectionInputMedia/sectionInputMedia.tpl.html

@@ -46,6 +46,12 @@
                             <span flex="none">Enter video details to see preview</span>
                         </div>
 
+                        <video-embed ng-if="SectionInputMediaController.videoForm.$valid"
+                                     provider="{{mediaContent.provider}}"
+                                     video-id="{{mediaContent.videoId}}"
+                                     flex="grow">
+                        </video-embed>
+
                     </div>
 
                     <ng-form name="SectionInputMediaController.videoForm" ng-if="mediaContent.type =='video'" flex>

app/src/common/directives/directives.ts

@@ -4,6 +4,7 @@ namespace common.directives {
 
     angular.module(namespace, [
         namespace + '.avatar',
+        namespace + '.videoEmbed',
         namespace + '.menuToggle',
         namespace + '.uploadImage',
         namespace + '.groupedTags',

app/src/common/directives/videoEmbed/videoEmbed.spec.ts

@@ -0,0 +1,44 @@
+namespace common.directives.markdownEditor {
+
+    interface TestScope extends ng.IRootScopeService {
+        testModel: any;
+    }
+
+    describe('Markdown editor directive', () => {
+
+        let $compile:ng.ICompileService,
+            $rootScope:TestScope
+        ;
+
+        beforeEach(()=> {
+
+            module('app');
+
+            inject((_$compile_, _$rootScope_) => {
+                $compile = _$compile_;
+                $rootScope = _$rootScope_;
+            });
+
+        });
+
+        it('should initialise the directive and change the model', () => {
+
+            let testText = "Some **markdown** text";
+
+            $rootScope.testModel = testText;
+
+            let element = $compile(`<markdown-editor ng-model="testModel" spell-checker="false"></markdown-editor>`)($rootScope);
+
+            $rootScope.$digest();
+
+            $(element).find('.editor-toolbar > a').first().click();
+
+            $rootScope.$digest();
+
+            expect($rootScope.testModel).not.to.equal(testText);
+        });
+
+
+    });
+
+}

app/src/common/directives/videoEmbed/videoEmbed.tpl.html

@@ -0,0 +1,21 @@
+<div class="video-embed" ng-switch="provider">
+
+    <iframe
+        ng-switch-when="youtube"
+        width="420"
+        height="315"
+        src="{{url}}"
+        frameborder="0"
+        allowfullscreen
+    ></iframe>
+
+    <iframe
+        ng-switch-when="vimeo"
+        src="{{url}}"
+        width="500"
+        height="281"
+        frameborder="0"
+        allowfullscreen>
+    </iframe>
+
+</div>

app/src/common/directives/videoEmbed/videoEmbed.ts

@@ -0,0 +1,54 @@
+namespace common.directives.videoEmbed {
+
+    export const namespace = 'common.directives.videoEmbed';
+
+    export interface IVideoEmbedScope extends ng.IScope {
+        provider: string;
+        videoId: string;
+        url: string;
+    }
+
+    class VideoEmbedDirective implements ng.IDirective {
+
+        public restrict = 'E';
+        public templateUrl = 'templates/common/directives/videoEmbed/videoEmbed.tpl.html';
+        public replace = false;
+        public scope = {
+            provider: '@',
+            videoId: '@',
+        };
+
+        constructor(private $sce:ng.ISCEService) {
+        }
+
+        public link = ($scope: IVideoEmbedScope, $element: ng.IAugmentedJQuery, $attrs: ng.IAttributes) => {
+
+            //@todo detect when scope property changes and force redraw of the iframe
+
+            switch($scope.provider){
+                case 'youtube':
+                    $scope.url = this.$sce.trustAsResourceUrl(`https://www.youtube.com/embed/${$scope.videoId}?modestbranding=1`);
+                break;
+
+                case 'vimeo':
+                    $scope.url = this.$sce.trustAsResourceUrl(`https://player.vimeo.com/video/${$scope.videoId}`);
+                break;
+
+            }
+
+        };
+
+        static factory(): ng.IDirectiveFactory {
+            const directive =  ($sce) => new VideoEmbedDirective($sce);
+            directive.$inject = ['$sce'];
+            return directive;
+        }
+    }
+
+    angular.module(namespace, [
+    ])
+        .directive('videoEmbed', VideoEmbedDirective.factory())
+    ;
+
+
+}

app/src/common/models/section/sections/mediaModel.ts

@@ -71,8 +71,8 @@ namespace common.models.sections {
         public static videoProviders:IVideoProvider[] = [
             {
                 providerKey: Media.videoProviderVimeo,
-                validationRegex: /^[0-9]{8}$/,
-                idLength: 8
+                validationRegex: /^[0-9]{9}$/,
+                idLength: 9
             },
             {
                 providerKey: Media.videoProviderYoutube,