src/widgets/Mediafragment.js
branchnew-model
changeset 1020 198c2b79f5e1
parent 1019 3ab36f402b0c
equal deleted inserted replaced
1019:3ab36f402b0c 1020:198c2b79f5e1
     2     IriSP.Widgets.Widget.call(this, player, config);
     2     IriSP.Widgets.Widget.call(this, player, config);
     3     this.last_hash_key = "";
     3     this.last_hash_key = "";
     4     this.last_hash_value = "";
     4     this.last_hash_value = "";
     5     window.onhashchange = this.functionWrapper("goToHash");
     5     window.onhashchange = this.functionWrapper("goToHash");
     6     if (typeof window.addEventListener !== "undefined") {
     6     if (typeof window.addEventListener !== "undefined") {
     7         var _this = this;
       
     8         window.addEventListener('message', function(_msg) {
     7         window.addEventListener('message', function(_msg) {
     9             if (/^#/.test(_msg.data)) {
     8             if (/^#/.test(_msg.data)) {
    10                 _this.setWindowHash(_msg.data);
     9                 this.setWindowHash(_msg.data);
    11             }
    10             }
    12         });
    11         })
    13     };
    12     };
    14     this.onMdpEvent("Mediafragment.setHashToAnnotation","setHashToAnnotation");
    13     this.bindPopcorn("pause","setHashToTime");
       
    14     this.bindPopcorn("seeked","setHashToTime");
       
    15     this.bindPopcorn("IriSP.Mediafragment.setHashToAnnotation","setHashToAnnotation");
    15     this.blocked = false;
    16     this.blocked = false;
    16 };
    17 }
    17 
    18 
    18 IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget();
    19 IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget();
    19 
    20 
    20 IriSP.Widgets.Mediafragment.prototype.draw = function() {
    21 IriSP.Widgets.Mediafragment.prototype.draw = function() {
    21     this.onMediaEvent("setpause","setHashToTime");
    22     this.goToHash();
    22     var _this = this;
    23 }
    23     this.getWidgetAnnotations().forEach(function(_annotation) {
       
    24         _annotation.on("click", function() {
       
    25             _this.setHashToAnnotation(_annotation.id);
       
    26         });
       
    27     });
       
    28     if (this.media.loadedMetadata) {
       
    29         this.goToHash();
       
    30     } else {
       
    31         this.onMediaEvent("loadedmetadata","goToHash");
       
    32     }
       
    33 };
       
    34 
    24 
    35 IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) {
    25 IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) {
    36     if (typeof window.history !== "undefined" && typeof window.history.replaceState !== "undefined") {
    26     if (typeof window.history !== "undefined" && typeof window.history.replaceState !== "undefined") {
    37         window.history.replaceState({}, "", _hash);
    27         window.history.replaceState({}, "", _hash);
    38     } else {
    28     } else {
    39         document.location.hash = _hash;
    29         document.location.hash = _hash;
    40     }
    30     }
    41 };
    31 }
    42 
    32 
    43 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
    33 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() {
    44     var _tab = document.location.hash.replace(/^#/,'').split('&');
    34     var _tab = document.location.hash.replace(/^#/,'').split('&');
    45     _tab = IriSP._(_tab).filter(function(_el) {
    35     _tab = IriSP._(_tab).filter(function(_el) {
    46         return _el && !/^(id|t)=/.test(_el);
    36         return _el && !/^(id|t)=/.test(_el);
    47     });
    37     });
    48     if (this.last_hash_key) {
    38     if (this.last_hash_key) {
    49         _tab.push(this.last_hash_key + '=' + this.last_hash_value);
    39         _tab.push(this.last_hash_key + '=' + this.last_hash_value);
    50     }
    40     }
    51     return '#' + _tab.join('&');
    41     return '#' + _tab.join('&');
    52 };
    42 }
    53 
    43 
    54 IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
    44 IriSP.Widgets.Mediafragment.prototype.goToHash = function() {
    55     if (document.location.hash !== this.getLastHash()) {
    45     if (document.location.hash !== this.getLastHash()) {
    56         var _tab = document.location.hash.replace(/^#/,'').split('&');
    46         var _tab = document.location.hash.replace(/^#/,'').split('&');
    57         for (var _i = 0; _i < _tab.length; _i++) {
    47         for (var _i = 0; _i < _tab.length; _i++) {
    60                 this.last_hash_key = _subtab[0];
    50                 this.last_hash_key = _subtab[0];
    61                 this.last_hash_value = _subtab[1];
    51                 this.last_hash_value = _subtab[1];
    62                 if (this.last_hash_key == "id") {
    52                 if (this.last_hash_key == "id") {
    63                     var _annotation = this.source.getElement(this.last_hash_value);
    53                     var _annotation = this.source.getElement(this.last_hash_value);
    64                     if (typeof _annotation !== "undefined") {
    54                     if (typeof _annotation !== "undefined") {
    65                         this.media.setCurrentTime(_annotation.begin);
    55                         this.player.popcorn.currentTime(_annotation.begin.getSeconds());
    66                     }
    56                     }
    67                 }
    57                 }
    68                 if (this.last_hash_key == "t") {
    58                 if (this.last_hash_key == "t") {
    69                     this.media.setCurrentTime(1000*this.last_hash_value);
    59                     this.player.popcorn.currentTime(this.last_hash_value);
    70                 }
    60                 }
    71                 break;
    61                 break;
    72             }
    62             }
    73         }
    63         }
    74     }
    64     }
    75 };
    65 }
    76 
    66 
    77 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotationId) {
    67 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotationId) {
    78     this.setHash( 'id', _annotationId );
    68     this.setHash( 'id', _annotationId );
    79 };
    69 }
    80 
    70 
    81 IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() {
    71 IriSP.Widgets.Mediafragment.prototype.setHashToTime = function(_time) {
    82     this.setHash( 't', this.media.getCurrentTime().getSeconds() );
    72     if (_time !== NaN) {
    83 };
    73         this.setHash( 't', this.player.popcorn.currentTime() );
       
    74     }
       
    75 }
    84 
    76 
    85 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value) {
    77 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value) {
    86     if (!this.blocked && (this.last_hash_key !== _key || this.last_hash_value !== _value)) {
    78     if (!this.blocked && (this.last_hash_key !== _key || this.last_hash_value !== _value)) {
    87         this.last_hash_key = _key;
    79         this.last_hash_key = _key;
    88         this.last_hash_value = _value;
    80         this.last_hash_value = _value;
    89         var _hash = this.getLastHash();
    81         var _hash = this.getLastHash();
    90         this.setWindowHash(_hash);
    82         this.setWindowHash(_hash);
    91         if (window.parent !== window) {
    83         if (window.parent !== window) {
    92             window.parent.postMessage(_hash,"*");
    84             window.parent.postMessage(_hash,"*")
    93         }
    85         }
    94         this.block();
    86         this.block();
    95     }
    87     }
    96 };
    88 }
    97 
    89 
    98 IriSP.Widgets.Mediafragment.prototype.unblock = function() {
    90 IriSP.Widgets.Mediafragment.prototype.unblock = function() {
    99     if (typeof this.blockTimeout !== "undefined") {
    91     if (typeof this.blockTimeout !== "undefined") {
   100         window.clearTimeout(this.blockTimeout);
    92         window.clearTimeout(this.blockTimeout);
   101     }
    93     }
   102     this.blockTimeout = undefined;
    94     this.blockTimeout = undefined;
   103     this.blocked = false;
    95     this.blocked = false;
   104 };
    96 }
   105 
    97 
   106 IriSP.Widgets.Mediafragment.prototype.block = function() {
    98 IriSP.Widgets.Mediafragment.prototype.block = function() {
   107     if (typeof this.blockTimeout !== "undefined") {
    99     if (typeof this.blockTimeout !== "undefined") {
   108         window.clearTimeout(this.blockTimeout);
   100         window.clearTimeout(this.blockTimeout);
   109     }
   101     }
   110     this.blocked = true;
   102     this.blocked = true;
   111     this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1500);
   103     this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1000);
   112 };
   104 }