Pr aarhus changes (#9)

* Changed video source order to be: webm, ogg, mp4. * Removed Offline checks in video slide. * Fixed removal of event listeners for video slide. * Fixed empty sources checks and removed possibility of infinite loop crash. * Fixed manual calender filter order.
os2display · Feb 8, 2019 · a7e5e8c · a7e5e8c
1 parent 545b8e2
commit a7e5e8c
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # os2display/default-template-bundle CHANGELOG
 
+## 1.1.1
+
+* Changed video source order to be: webm, ogg, mp4.
+* Removed Offline checks in video slide.
+* Fixed removal of event listeners for video slide.
+* Fixed empty sources checks and removed possibility of infinite loop crash.
+* Fixed manual calender filter order.
+
 ## 1.1.0
 
 * Removed os2display requirements.

diff --git a/...urces/public/templates/default_templates/slides/manual-calendar/manual-calendar-edit.html b/...urces/public/templates/default_templates/slides/manual-calendar/manual-calendar-edit.html
@@ -5,7 +5,7 @@
     </textarea>
     <table class="manual-calendar--events" data-ng-style="{'color': ikSlide.options.textcolor}">
       <tr class="manual-calendar--event"
-          data-ng-repeat="event in ikSlide.options.eventitems | limitTo : ikSlide.options.displayitems | activeEvents | orderBy: 'from'"
+          data-ng-repeat="event in ikSlide.options.eventitems | activeEvents | orderBy: 'from' | limitTo : ikSlide.options.displayitems"
           data-ng-style="{'border-color': ikSlide.options.textcolor}">
         <td class="manual-calendar--title">
           {{event.title}}

diff --git a/Resources/public/templates/default_templates/slides/manual-calendar/manual-calendar.html b/Resources/public/templates/default_templates/slides/manual-calendar/manual-calendar.html
@@ -3,7 +3,7 @@
     <h1 class="manual-calendar--header">{{ikSlide.options.headline}}</h1>
     <table class="manual-calendar--events" data-ng-style="{'color': ikSlide.options.textcolor}">
       <tr class="manual-calendar--event"
-          data-ng-repeat="event in ikSlide.options.eventitems | limitTo : ikSlide.options.displayitems | activeEvents | orderBy: 'from'"
+          data-ng-repeat="event in ikSlide.options.eventitems | activeEvents | orderBy: 'from' | limitTo : ikSlide.options.displayitems"
           data-ng-style="{'border-color': ikSlide.options.textcolor}">
         <td class="manual-calendar--title">
           {{event.title}}

diff --git a/Resources/public/templates/default_templates/slides/only-video/only-video-edit.html b/Resources/public/templates/default_templates/slides/only-video/only-video-edit.html
@@ -1,10 +1,10 @@
 <div class="only-video" data-ng-style="{'width': theStyle.width, 'height': theStyle.height}">
   <div data-ng-if="ikSlide.media.length > 0 && ikSlide.media[0].provider_status === 3">Videoen er endnu ikke klar.</div>
   <video data-ng-if="ikSlide.media.length > 0 && ikSlide.media[0].provider_status === 1" class="only-video--video-player" controls id="videoPlayer">
-    <source data-ng-src="{{ikSlide.currentVideo.mp4}}" type="video/mp4">
-    <source data-ng-src="{{ikSlide.currentVideo.ogg}}" type="video/ogg">
     <source data-ng-src="{{ikSlide.currentVideo.webm}}" type="video/webm">
+    <source data-ng-src="{{ikSlide.currentVideo.ogg}}" type="video/ogg">
+    <source data-ng-src="{{ikSlide.currentVideo.mp4}}" type="video/mp4">
   </video>
 
   <img class="only-video--logo" data-ng-show="ikSlide.currentLogo" data-ng-style="{'top':ikSlide.options.logopos.top, 'bottom':ikSlide.options.logopos.bottom, 'left':ikSlide.options.logopos.left, 'right':ikSlide.options.logopos.right, 'width': ikSlide.options.logosize}" data-ng-src="{{ikSlide.currentLogo}}" />
-</div>
+</div>
diff --git a/Resources/public/templates/default_templates/slides/only-video/only-video.html b/Resources/public/templates/default_templates/slides/only-video/only-video.html
@@ -1,8 +1,8 @@
 <div class="only-video">
   <video id="videoPlayer-{{ikSlide.uniqueId}}" class="only-video--video-player" poster="assets/images/black.png">
-    <source data-src="{{ikSlide.currentVideo.mp4}}" type="video/mp4">
-    <source data-src="{{ikSlide.currentVideo.ogg}}" type="video/ogg">
     <source data-src="{{ikSlide.currentVideo.webm}}" type="video/webm">
+    <source data-src="{{ikSlide.currentVideo.ogg}}" type="video/ogg">
+    <source data-src="{{ikSlide.currentVideo.mp4}}" type="video/mp4">
       Your browser does not support the <code>video</code> element.
   </video>
 

diff --git a/Resources/public/templates/js/videoSlide.js b/Resources/public/templates/js/videoSlide.js
@@ -34,6 +34,19 @@ if (!window.slideFunctions['video']) {
     run: function runVideoSlide(slide, region) {
       region.itkLog.info("Running video slide: " + slide.title);
 
+      var video;
+
+      // If media is empty go to the next slide.
+      if (slide.media.length <= 0 || !slide.media.hasOwnProperty('0') ||slide.media[0].length <= 0) {
+        region.itkLog.error("No video sources");
+        region.$timeout(
+          function (region) {
+            region.nextSlide();
+          },
+          5000, true, region);
+        return;
+      }
+
       /**
        * Helper function to update source for video.
        *
@@ -68,92 +81,78 @@ if (!window.slideFunctions['video']) {
        */
       var videoErrorHandling = function videoErrorHandling(event) {
         if (event !== undefined) {
-          // Normal javascript error event.
-          event.target.removeEventListener(event.type, videoErrorHandling);
           region.itkLog.error('Network connection.', event);
         }
         else {
           region.itkLog.error('Unknown video network connection error.');
         }
-        Offline.off('down');
+
+        video.removeEventListener('error', videoErrorHandling);
 
         // Go to the next slide.
         region.nextSlide();
       };
 
-      // If media is empty go to the next slide.
-      if (slide.media.length <= 0) {
-        region.nextSlide();
-      }
-
-      // Check if there is an internet connection.
-      Offline.on('down', videoErrorHandling);
-      Offline.check();
-      if (Offline.state === 'down') {
-        videoErrorHandling(undefined);
-        return;
-      }
-
       region.$timeout(function () {
         // Get hold of the video element and update.
-        var video = document.getElementById('videoPlayer-' + slide.uniqueId);
+        video = document.getElementById('videoPlayer-' + slide.uniqueId);
 
         // Update video.
         updateVideoSources(video, false);
 
-        // Add error handling.
+        // Add/refresh error handling.
+        video.removeEventListener('error', videoErrorHandling);
         video.addEventListener('error', videoErrorHandling);
 
         // Reset video position to prevent flicker from latest playback.
         try {
           // Load video to ensure playback after possible errors from last playback. If not called
           // the video will not play.
           video.load();
+
+          // Fade timeout to ensure video don't start before it's displayed.
+          region.$timeout(function () {
+              // Create interval to get video duration (ready state larger than one is
+              // meta-data loaded).
+              var interval = region.$interval(function () {
+                  if (video.readyState > 0) {
+                      var duration = Math.round(video.duration);
+                      region.progressBar.start(duration);
+
+                      // Metadata/duration found stop the interval.
+                      region.$interval.cancel(interval);
+                  }
+              }, 500);
+
+              // Go to the next slide when video playback has ended.
+              video.onended = function ended(event) {
+                  region.itkLog.info("Video playback ended.", event);
+                  region.$timeout(function () {
+                          region.scope.$apply(function () {
+                              // Remove error handling.
+                              video.removeEventListener('error', videoErrorHandling);
+
+                              // Remove video src.
+                              updateVideoSources(video, true);
+
+                              // Go to the next slide.
+                              region.nextSlide();
+                          });
+                      },
+                      1000);
+              };
+
+              // Play the video.
+              video.play();
+          }, region.fadeTime);
         }
         catch (error) {
           region.itkLog.info('Video content might not be loaded, so reset current time not possible');
 
           // Use the error handling to get next slide.
           videoErrorHandling(undefined);
         }
-
-        // Fade timeout to ensure video don't start before it's displayed.
-        region.$timeout(function () {
-          // Create interval to get video duration (ready state larger than one is
-          // meta-data loaded).
-          var interval = region.$interval(function () {
-            if (video.readyState > 0) {
-              var duration = Math.round(video.duration);
-              region.progressBar.start(duration);
-
-              // Metadata/duration found stop the interval.
-              region.$interval.cancel(interval);
-            }
-          }, 500);
-
-          // Go to the next slide when video playback has ended.
-          video.onended = function ended(event) {
-            region.itkLog.info("Video playback ended.", event);
-            region.$timeout(function () {
-                region.scope.$apply(function () {
-                  // Remove error handling.
-                  video.removeEventListener('error', videoErrorHandling);
-                  Offline.off('down');
-
-                  // Remove video src.
-                  updateVideoSources(video, true);
-
-                  // Go to the next slide.
-                  region.nextSlide();
-                });
-              },
-              1000);
-          };
-
-          // Play the video.
-          video.play();
-        }, region.fadeTime);
       });
     }
   };
-}
+}