layout and seek

thexerteproject · Jul 13, 2018 · 1a4faf4 · 1a4faf4
1 parent 1068075
commit 1a4faf4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 32 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/common_html5/js/popcorn/popcorn-complete.js b/modules/xerte/parent_templates/Nottingham/common_html5/js/popcorn/popcorn-complete.js
@@ -4318,8 +4318,8 @@
         // Mark type as Mediasite
         self._util.type = "Mediasite";
 
-        elem.id = "div";
-
+        elem.id = "mediasiteIframe";
+        elem.addClass = " .iframe ";
 
         function addPlayerReadyCallback( callback ) {
             playerReadyCallbacks.push( callback );
@@ -4338,28 +4338,33 @@
 
             impl.src = aSrc;
             aSrc = "http://deltion.mediamission.nl/Mediasite/Play/c550ff4fee9d493b8f5efebe45b777271d";
-            parent.appendChild( elem );
+            parent.appendChild(elem);
 
             $.getScript("modules/xerte/parent_templates/Nottingham/common_html5/js/popcorn/plugins/MediasitePlayerIFrameAPI.js")
-                .done(function(){
-                        console.log("Mediasiteplayer loaded" + aSrc + "\n" + elem);
-                        player = new Mediasite.Player(elem.id,
-                            {
-                                url: aSrc,
-                                events: {
-                                    "ready": onReady,
-                                    "error": function(errorData) {
-                                      console.log(errorData);
-                                      },
-                                    "playstatechanged": onPlayStateChanged,
-                                    "playerstatechanged": onPlayerStateChanged,
-                                    "currenttimechanged": onCurrentTimeChanged
-                                }
+                .done(function () {
+                    console.log("Mediasiteplayer loaded" + aSrc + "\n" + elem);
+                    player = new Mediasite.Player(elem.id,
+                        {
+                            url: aSrc,
+                            events: {
+                                "ready": onReady,
+                                "error": function (errorData) {
+                                    console.log(errorData);
+                                },
+                                "playstatechanged": onPlayStateChanged,
+                                "playerstatechanged": onPlayerStateChanged,
+                                "currenttimechanged": onCurrentTimeChanged
+                            },
+                            layoutOptions: {
+                                "BackgroundColor": "#FFFFFF"
                             }
-                        );
-                    })
-                .fail(function(a,b,c){console.log("Failed: " + c)});
-
+                        }
+                    );
+                })
+                .fail(function (a, b, c) {
+                    console.log("Failed: " + c)
+                });
+        }
 
             //elem.src = aSrc;
 
@@ -4375,6 +4380,12 @@
                 impl.readyState = self.HAVE_ENOUGH_DATA;
                 self.dispatchEvent( "canplaythrough" );
 
+                var iframe = $(".mediasite")[0].children[0];
+                iframe.style.height = "100%";
+                iframe.style.width = "100%";
+
+                player.currentTime = 0;
+                player.seekTo(0);
                 playerReady = true;
               //addEvent("pause", onPause);
             }
@@ -4386,8 +4397,15 @@
 
             function onCurrentTimeChanged (data) {
                 impl.currentTime = data.currentTime;
+                //player.currentTime = impl.currentTime;
+                //player.seekTo(impl.currentTime);
             }
 
+            function changeCurrentTime (data)
+            {
+                impl.currentTime = data;
+                player.seekTo(data);
+            }
             function onPlayerStateChanged (data)
             {
               //console.log( data.state );
@@ -4447,6 +4465,8 @@
             };
 
 
+
+
             function addEvent (event, listener)
             {
                self.addEventListener(event, listener, false);
@@ -4455,12 +4475,6 @@
             }
 
 
-        }
-
-
-
-
-
 
 
         function destroyPlayer() {
@@ -4506,7 +4520,7 @@
                     return impl.currentTime;
                 },
                 set: function( aValue ) {
-                    onCurrentTimeChanged( aValue );
+                    changeCurrentTime( aValue );
                 }
             }
         });
@@ -6966,6 +6980,7 @@
           return impl.currentTime;
         },
         set: function( aValue ) {
+          debugger;
           changeCurrentTime( aValue );
         }
       },

diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/mediaLesson.html b/modules/xerte/parent_templates/Nottingham/models_html5/mediaLesson.html
@@ -159,8 +159,12 @@
 			});
 
 			$(".popcornMedia.vimeo").each(function(i) {
-				mediaLesson.resizeVimeo($(this));
-			});
+                mediaLesson.resizeVimeo($(this));
+            });
+
+            $(".popcornMedia.vimeo").each(function(i) {
+                mediaLesson.resizeMediasite($(this));
+            });
 
 			$(".audioImg").each(function() {
 				var $this = $(this);
@@ -271,6 +275,14 @@
 			this.resizeYouTube($vimeo);
 		};
 
+		this.resizeMediasite = function($mediasite) {
+		  var parent = $mediasite[0].parentElement;
+
+		  var parentt = $(" .panel tileH fullH ");
+
+		  $mediasite[0].style.height = "90%"//parent.style.height;
+		  $mediasite[0].style.width = "100%";
+		};
 
 		this.leavePage = function () {
 		    currSegment.end = lastTime;
@@ -393,7 +405,7 @@
 						mediaLesson.loadJS();
 					})
 					.fail(function( jqxhr, settings, exception ) {
-						console.log("Failed to load Popcorn.js & plugins");
+						console.log("Failed to load Popcorn.js & plugins" + exception);
 					});
 			}
 		};
@@ -885,7 +897,7 @@
 
 				} else if (mediaData.media.indexOf("mediamission.nl") != -1) {
                     var $mediasite = $holder.find(".popcornMedia").addClass("mediasite");
-                    mediaLesson.resizeVimeo($mediasite);
+                    mediaLesson.resizeMediasite($mediasite);
 
                     popcornInstance = Popcorn.smart("#" + $holder.attr("id") + " .mediasite", mediaData.media);
                     $mediasite.data("popcornInstance", popcornInstance);