Fixed video embed display to have flexible 16:9 ratio, implemented if…

…rame toggling to ensure reload of frame
spira · Nov 17, 2015 · 55140fe · 55140fe
1 parent adeb330
commit 55140fe
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 32 deletions.
diff --git a/app/src/common/directives/contentSectionsInput/contentSectionsInput.less b/app/src/common/directives/contentSectionsInput/contentSectionsInput.less
@@ -39,9 +39,25 @@
     }
 
     .no-video-preview {
-        margin: 10px;
         border: 1px dashed #ddd;
         color: #ddd;
+        position: relative;
+
+        &:before{
+            content: "";
+            display: block;
+            width: 100%;		//desired width
+            padding-top: 56.25%; 	//ratio of 16:9
+        }
+
+        > span {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+
     }
 
 }
diff --git a/...common/directives/contentSectionsInput/types/sectionInputMedia/sectionInputMedia.tpl.html b/...common/directives/contentSectionsInput/types/sectionInputMedia/sectionInputMedia.tpl.html
@@ -34,27 +34,28 @@
                 </ng-form>
 
 
-                <div layout-gt-md="row">
+                <div layout-gt-md="row" ng-if="mediaContent.type =='video'">
 
-                    <div flex layout="column" >
-
-                        <div class="no-video-preview"
-                             ng-if="SectionInputMediaController.videoForm.$invalid"
-                             flex="grow"
-                             layout="row"
-                             layout-align="center center">
-                            <span flex="none">Enter video details to see preview</span>
-                        </div>
+                    <div flex layout="column" layout-padding>
 
                         <video-embed ng-if="SectionInputMediaController.videoForm.$valid"
                                      provider="{{mediaContent.provider}}"
                                      video-id="{{mediaContent.videoId}}"
                                      flex="grow">
                         </video-embed>
 
+                        <div class="no-video-preview"
+                             ng-if="!SectionInputMediaController.videoForm.$valid"
+                             flex="grow">
+                            <span layout="row"
+                                  layout-align="center center">
+                                <span flex="none">Enter video details to see preview</span>
+                            </span>
+                        </div>
+
                     </div>
 
-                    <ng-form name="SectionInputMediaController.videoForm" ng-if="mediaContent.type =='video'" flex>
+                    <ng-form name="SectionInputMediaController.videoForm" flex>
 
                         <md-input-container flex>
                             <label>Video Provider</label>

diff --git a/app/src/common/directives/videoEmbed/videoEmbed.less b/app/src/common/directives/videoEmbed/videoEmbed.less
@@ -0,0 +1,28 @@
+@import (reference) "../../../styles/global.less";
+
+.video-embed {
+
+    position: relative;
+
+    &:before{
+        content: "";
+        display: block;
+        width: 100%;		//desired width
+        padding-top: 56.25%; 	//ratio of 16:9
+    }
+
+    > .frame-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+
+        > iframe {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+}
diff --git a/app/src/common/directives/videoEmbed/videoEmbed.tpl.html b/app/src/common/directives/videoEmbed/videoEmbed.tpl.html
@@ -1,21 +1,20 @@
-<div class="video-embed" ng-switch="provider">
+<div class="video-embed" ng-switch="provider" ng-if="iframeToggle">
 
-    <iframe
-        ng-switch-when="youtube"
-        width="420"
-        height="315"
-        src="{{url}}"
-        frameborder="0"
-        allowfullscreen
-    ></iframe>
+    <div class="frame-wrapper">
+        <iframe
+                ng-switch-when="youtube"
+                src="{{url}}"
+                frameborder="0"
+                allowfullscreen
+                ></iframe>
+
+        <iframe
+                ng-switch-when="vimeo"
+                src="{{url}}"
+                frameborder="0"
+                allowfullscreen>
+        </iframe>
+    </div>
 
-    <iframe
-        ng-switch-when="vimeo"
-        src="{{url}}"
-        width="500"
-        height="281"
-        frameborder="0"
-        allowfullscreen>
-    </iframe>
 
 </div>
diff --git a/app/src/common/directives/videoEmbed/videoEmbed.ts b/app/src/common/directives/videoEmbed/videoEmbed.ts
@@ -6,6 +6,7 @@ namespace common.directives.videoEmbed {
         provider: string;
         videoId: string;
         url: string;
+        iframeToggle: boolean;
     }
 
     class VideoEmbedDirective implements ng.IDirective {
@@ -25,18 +26,31 @@ namespace common.directives.videoEmbed {
 
             //@todo detect when scope property changes and force redraw of the iframe
 
+            $scope.$watchCollection(() => [$scope.videoId, $scope.provider], () => {
+
+                this.reloadIframes($scope);
+
+            });
+
+        };
+
+        private reloadIframes($scope: IVideoEmbedScope):void {
+
+            $scope.iframeToggle = false;
+
             switch($scope.provider){
                 case 'youtube':
                     $scope.url = this.$sce.trustAsResourceUrl(`https://www.youtube.com/embed/${$scope.videoId}?modestbranding=1`);
-                break;
+                    break;
 
                 case 'vimeo':
                     $scope.url = this.$sce.trustAsResourceUrl(`https://player.vimeo.com/video/${$scope.videoId}`);
-                break;
+                    break;
 
             }
 
-        };
+            $scope.iframeToggle = true;
+        }
 
         static factory(): ng.IDirectiveFactory {
             const directive =  ($sce) => new VideoEmbedDirective($sce);