| Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.PlayList.js |
| — | — | @@ -8,7 +8,7 @@ |
| 9 | 9 | * @author: Michael Dale mdale@wikimedia.org |
| 10 | 10 | * @license GPL2 |
| 11 | 11 | */ |
| 12 | | -var mv_default_playlist_attributes = { |
| | 12 | +var mw_default_playlist_attributes = { |
| 13 | 13 | // playlist attributes : |
| 14 | 14 | "id":null, |
| 15 | 15 | "title":null, |
| — | — | @@ -98,14 +98,17 @@ |
| 99 | 99 | this.default_track = this.tracks[0]; |
| 100 | 100 | |
| 101 | 101 | // get all the attributes: |
| 102 | | - for ( var attr in mv_default_playlist_attributes ) { |
| | 102 | + for ( var attr in mw_default_playlist_attributes ) { |
| 103 | 103 | if ( element.getAttribute( attr ) ) { |
| 104 | 104 | this[attr] = element.getAttribute( attr ); |
| 105 | 105 | // mw.log('attr:' + attr + ' val: ' + video_attributes[attr] +" "+'elm_val:' + element.getAttribute(attr) + "\n (set by elm)"); |
| 106 | 106 | } else { |
| 107 | | - this[attr] = mv_default_playlist_attributes[attr]; |
| | 107 | + this[attr] = mw_default_playlist_attributes[attr]; |
| 108 | 108 | // mw.log('attr:' + attr + ' val: ' + video_attributes[attr] +" "+ 'elm_val:' + element.getAttribute(attr) + "\n (set by attr)"); |
| 109 | 109 | } |
| | 110 | + // Boolean -> string |
| | 111 | + if( this[attr] == 'false' ) this[attr] = false; |
| | 112 | + if( this[attr] == 'true' ) this[attr] = true; |
| 110 | 113 | } |
| 111 | 114 | // make sure height and width are int: |
| 112 | 115 | this.width = parseInt( this.width ); |
| — | — | @@ -120,10 +123,9 @@ |
| 121 | 124 | if ( this.controls === false ) { |
| 122 | 125 | this.layout.control_height = 0; |
| 123 | 126 | this.layout.title_bar_height = 0; |
| 124 | | - } else { |
| 125 | | - // setup the controlBuilder object: |
| 126 | | - this.ctrlBuilder = new ctrlBuilder( this ); |
| 127 | | - } |
| | 127 | + } |
| | 128 | + // setup the controlBuilder object: |
| | 129 | + this.ctrlBuilder = new ctrlBuilder( this ); |
| 128 | 130 | }, |
| 129 | 131 | // run inheritEmbedPlayer on every clip (we have changed the playback method) |
| 130 | 132 | inheritEmbedPlayer:function() { |
| — | — | @@ -465,8 +467,7 @@ |
| 466 | 468 | this.ctrlBuilder.addControls( ); |
| 467 | 469 | } |
| 468 | 470 | |
| 469 | | - this.setupClipDisplay(); |
| 470 | | - |
| | 471 | + this.setupClipDisplay(); |
| 471 | 472 | // update the title and status bar |
| 472 | 473 | this.updateBaseStatus(); |
| 473 | 474 | this.doSmilActions(); |
| — | — | @@ -696,8 +697,7 @@ |
| 697 | 698 | |
| 698 | 699 | // Do swap: |
| 699 | 700 | this.cur_clip = new_clip; |
| 700 | | - $j( '#clipDesc_' + this.cur_clip.id ).show(); |
| 701 | | - |
| | 701 | + $j( '#clipDesc_' + this.cur_clip.id ).show(); |
| 702 | 702 | // Update the playhead: |
| 703 | 703 | if( this.controls ){ |
| 704 | 704 | // Check if we have into_perc |
| — | — | @@ -706,7 +706,6 @@ |
| 707 | 707 | }else{ |
| 708 | 708 | var clip_time = this.cur_clip.dur_offset; |
| 709 | 709 | } |
| 710 | | - |
| 711 | 710 | this.updatePlayHead( clip_time / this.getDuration() ); |
| 712 | 711 | } |
| 713 | 712 | }, |
| — | — | @@ -747,15 +746,11 @@ |
| 748 | 747 | var _this = this; |
| 749 | 748 | mw.log( 'pl play' ); |
| 750 | 749 | // hide the playlist play button: |
| 751 | | - this.$interface.find('.play-btn-large' ).hide(); |
| | 750 | + this.$interface.find('.play-btn-large' ).hide(); |
| 752 | 751 | |
| 753 | 752 | // un-pause if paused: |
| 754 | 753 | if ( this.paused ) |
| 755 | 754 | this.paused = false; |
| 756 | | - |
| 757 | | - // update the control: |
| 758 | | - this.start_clip = this.cur_clip; |
| 759 | | - this.start_clip_src = this.cur_clip.src; |
| 760 | 755 | |
| 761 | 756 | if ( this.cur_clip.embed.supports['playlist_swap_loader'] ) { |
| 762 | 757 | // set the cur_clip to active |
| — | — | @@ -797,13 +792,14 @@ |
| 798 | 793 | // start up the playlist monitor |
| 799 | 794 | this.monitor(); |
| 800 | 795 | }, |
| 801 | | - /* |
| | 796 | + |
| | 797 | + /** |
| 802 | 798 | * the load function loads all the clips in order |
| 803 | 799 | */ |
| 804 | 800 | load:function( callback ) { |
| 805 | 801 | // do nothing right now) |
| 806 | 802 | //alert('load pl'); |
| 807 | | - callback(); |
| | 803 | + callback(); |
| 808 | 804 | }, |
| 809 | 805 | toggleMute:function() { |
| 810 | 806 | this.cur_clip.embed.toggleMute(); |
| — | — | @@ -821,6 +817,10 @@ |
| 822 | 818 | clip.embed.pause(); |
| 823 | 819 | } ); |
| 824 | 820 | |
| | 821 | + this.updateUIPauseState(); |
| | 822 | + }, |
| | 823 | + updateUIPauseState:function(){ |
| | 824 | + var _this = this; |
| 825 | 825 | // Copied from embedPlayer.pause ( in the refactor this is not needed ) |
| 826 | 826 | // update the ctrl "paused state" |
| 827 | 827 | this.$interface.find('.play-btn span' ) |
| — | — | @@ -859,54 +859,9 @@ |
| 860 | 860 | }, |
| 861 | 861 | // playlist stops playback for the current clip (and resets state for start clips) |
| 862 | 862 | stop:function() { |
| 863 | | - var _this = this; |
| 864 | | - /*mw.log("pl stop:"+ this.start_clip.id + ' c:'+this.cur_clip.id); |
| 865 | | - //if start clip |
| 866 | | - if(this.start_clip.id!=this.cur_clip.id){ |
| 867 | | - //restore clipDesc visibility & hide desc for start clip: |
| 868 | | - $j('#clipDesc_'+this.start_clip.id).html(''); |
| 869 | | - this.start_clip.getDetail(); |
| 870 | | - $j('#clipDesc_'+this.start_clip.id).css({display:'none'}); |
| 871 | | - this.start_clip.setBaseEmbedDim(this.start_clip.embed); |
| 872 | | - //equivalent of base stop |
| 873 | | - $j('#'+this.start_clip.embed.id).html(this.start_clip.embed.getThumbnailHTML()); |
| 874 | | - this.start_clip.embed.thumbnail_disp=true; |
| 875 | | - } |
| 876 | | - //empty the play-back container |
| 877 | | - $j('#mv_ebct_'+this.id).empty();*/ |
| 878 | | - |
| 879 | | - // stop all the clips: monitor: |
| 880 | | - window.clearInterval( this.smil_monitorTimerId ); |
| 881 | | - /*for (var i=0;i<this.clips.length;i++){ |
| 882 | | - var clip = this.clips[i]; |
| 883 | | - if(clip){ |
| 884 | | - clip.embed.stop(); |
| 885 | | - $j('#clipDesc_'+clip.id).hide(); |
| 886 | | - } |
| 887 | | - }*/ |
| 888 | | - // stop, hide and remove all active clips: |
| 889 | | - $j.each( this.activeClipList.getClipList(), function( inx, clip ) { |
| 890 | | - if ( clip ) { |
| 891 | | - clip.embed.stop(); |
| 892 | | - $j( '#clipDesc_' + clip.id ).hide(); |
| 893 | | - _this.activeClipList.remove( clip ); |
| 894 | | - } |
| 895 | | - } ); |
| 896 | | - // set the current clip to the first clip: |
| 897 | | - if ( this.start_clip ) { |
| 898 | | - this.cur_clip = this.start_clip; |
| 899 | | - // display the first clip thumb: |
| 900 | | - this.cur_clip.embed.stop(); |
| 901 | | - // hide other clips: |
| 902 | | - $j( '#' + this.id + ' .clip_container' ).hide(); |
| 903 | | - // show the first/current clip: |
| 904 | | - $j( '#clipDesc_' + this.cur_clip.id ).show(); |
| 905 | | - } |
| 906 | | - // reset the currentTime: |
| 907 | | - this.currentTime = 0; |
| 908 | | - // rest the sldier |
| 909 | | - this.updatePlayHead( 0 ); |
| 910 | | - // FIXME still some issues with "stoping" and reseting the playlist |
| | 863 | + var _this = this; |
| | 864 | + mw.log("mw.PlayList stop:"+ this.start_clip.id + ' c:'+this.cur_clip.id); |
| | 865 | + this.setupClipDisplay(); |
| 911 | 866 | }, |
| 912 | 867 | doSeek:function( v ) { |
| 913 | 868 | mw.log( 'pl:doSeek:' + v + ' sts:' + this.seek_time_sec ); |
| — | — | @@ -932,7 +887,7 @@ |
| 933 | 888 | var clip_time = relative_perc * _this.cur_clip.embed.getDuration(); |
| 934 | 889 | _this.cur_clip.embed.setCurrentTime( clip_time, function() { |
| 935 | 890 | //update the smil actions now that the seek is done |
| 936 | | - _this.doSmilActions(); |
| | 891 | + _this.doSmilActions(); |
| 937 | 892 | //say we are "ready" |
| 938 | 893 | if ( callback ) |
| 939 | 894 | callback(); |
| — | — | @@ -1068,47 +1023,20 @@ |
| 1069 | 1024 | } |
| 1070 | 1025 | track.addClip( clipObj, pos ); |
| 1071 | 1026 | }, |
| 1072 | | - swapClipDesc: function( req_clipID, callback ) { |
| 1073 | | - // hide all but the requested |
| 1074 | | - var _this = this; |
| 1075 | | - mw.log( 'r:' + req_clipID + ' cur:' + _this.id ); |
| 1076 | | - if ( req_clipID == _this.cur_clip.id ) { |
| 1077 | | - mw.log( 'no swap to same clip' ); |
| 1078 | | - } else { |
| 1079 | | - // fade out clips |
| 1080 | | - req_clip = null; |
| 1081 | | - $j.each( this.default_track.clips, function( i, clip ) { |
| 1082 | | - if ( clip.id != req_clipID ) { |
| 1083 | | - // fade out if display!=none already |
| 1084 | | - if ( $j( '#clipDesc_' + clip.id ).css( 'display' ) != 'none' ) { |
| 1085 | | - $j( '#clipDesc_' + clip.id ).fadeOut( "slow" ); |
| 1086 | | - } |
| 1087 | | - } else { |
| 1088 | | - req_clip = clip; |
| 1089 | | - } |
| 1090 | | - } ); |
| 1091 | | - // fade in requested clip *and set req_clip to current |
| 1092 | | - $j( '#clipDesc_' + req_clipID ).fadeIn( "slow", function() { |
| 1093 | | - _this.cur_clip = req_clip; |
| 1094 | | - if ( callback ) |
| 1095 | | - callback(); |
| 1096 | | - } ); |
| 1097 | | - } |
| 1098 | | - }, |
| 1099 | 1027 | run_transition: function( clip_inx, trans_type ) { |
| 1100 | 1028 | if ( typeof this.default_track.clips[ clip_inx ][ trans_type ] == 'undefined' ) |
| 1101 | 1029 | clearInterval( this.default_track.clips[ clip_inx ].timerId ); |
| 1102 | 1030 | else |
| 1103 | 1031 | this.default_track.clips[ clip_inx ][ trans_type ].run_transition(); |
| 1104 | 1032 | }, |
| 1105 | | - getPlayerWidth : function(){ |
| | 1033 | + getPlayerWidth: function(){ |
| 1106 | 1034 | var player = $j( this ).get( 0 ); |
| 1107 | 1035 | if ( typeof player != 'undefined' && player['offsetWidth'] ) |
| 1108 | 1036 | return player.offsetWidth; |
| 1109 | 1037 | else |
| 1110 | 1038 | return parseInt( this.width ); |
| 1111 | 1039 | }, |
| 1112 | | - getPlayerHeight : function(){ |
| | 1040 | + getPlayerHeight: function(){ |
| 1113 | 1041 | var player = $j( this ).get( 0 ); |
| 1114 | 1042 | if ( typeof player != 'undefined' && player['offsetHeight'] ) |
| 1115 | 1043 | return player.offsetHeight; |
| — | — | @@ -1346,8 +1274,8 @@ |
| 1347 | 1275 | // go to next in playlist: |
| 1348 | 1276 | this.pc.pp.playNext(); |
| 1349 | 1277 | }, |
| 1350 | | - stop:function() { |
| 1351 | | - mw.log( 'pl:do stop' ); |
| | 1278 | + stop: function() { |
| | 1279 | + mw.log( 'PlMvEmbed::do stop' ); |
| 1352 | 1280 | // set up convenience pointer to parent playlist |
| 1353 | 1281 | var _this = this.pc.pp; |
| 1354 | 1282 | |
| — | — | @@ -1593,8 +1521,7 @@ |
| 1594 | 1522 | // do a _play next: |
| 1595 | 1523 | _clip.pp.playNext(); |
| 1596 | 1524 | } |
| 1597 | | - } |
| 1598 | | - // @@todo could maybe generalize transIn with trasOut into one "flow" with a few scattered if statements |
| | 1525 | + } |
| 1599 | 1526 | // update/setup all transitions (will render current transition state) |
| 1600 | 1527 | |
| 1601 | 1528 | // process actions per transition types: |
| — | — | @@ -1607,7 +1534,7 @@ |
| 1608 | 1535 | * @param {string} tid the transition type [transIn|transOut] |
| 1609 | 1536 | * @param {function} callback the callback function passed onto doUPdate |
| 1610 | 1537 | */ |
| 1611 | | -mw.PlayList.prototype.procTranType = function( tid, callback){ |
| | 1538 | +mw.PlayList.prototype.procTranType = function( tid, callback){ |
| 1612 | 1539 | // Setup local clip pointer: |
| 1613 | 1540 | var _clip = this.cur_clip; |
| 1614 | 1541 | |
| — | — | @@ -1623,7 +1550,9 @@ |
| 1624 | 1551 | in_range = ( _clip.embed.currentTime >= ( _clip.dur - tObj.dur ) ) ? true : false; |
| 1625 | 1552 | |
| 1626 | 1553 | if ( in_range ) { |
| 1627 | | - if ( this.userSlide || this.paused ) { |
| | 1554 | + tObj.animation_state = 0; |
| | 1555 | + tObj.run_transition(); |
| | 1556 | + /*if ( this.userSlide || this.paused ) { |
| 1628 | 1557 | if ( tid == 'transIn' ){ |
| 1629 | 1558 | mvTransLib.doUpdate( tObj, |
| 1630 | 1559 | ( _clip.embed.currentTime / tObj.dur ), |
| — | — | @@ -1637,7 +1566,7 @@ |
| 1638 | 1567 | } else if ( tObj.animation_state == 0 ) { |
| 1639 | 1568 | mw.log( 'init/run_transition ' ); |
| 1640 | 1569 | tObj.run_transition(); |
| 1641 | | - } |
| | 1570 | + }*/ |
| 1642 | 1571 | } else { |
| 1643 | 1572 | // Close up transition if done & still onDispaly |
| 1644 | 1573 | if ( tObj.overlay_selector_id ) { |
| — | — | @@ -1645,8 +1574,9 @@ |
| 1646 | 1575 | mvTransLib.doCloseTransition( tObj ); |
| 1647 | 1576 | } |
| 1648 | 1577 | } |
| | 1578 | + |
| 1649 | 1579 | // Run the callback:: |
| 1650 | | - if( callback ) |
| | 1580 | + if( callback ) |
| 1651 | 1581 | callback(); |
| 1652 | 1582 | } |
| 1653 | 1583 | |
| — | — | @@ -1712,7 +1642,7 @@ |
| 1713 | 1643 | } |
| 1714 | 1644 | |
| 1715 | 1645 | // all good call function with tObj param |
| 1716 | | - mw.log( 'should call: ' + tObj.type + ' ' + tObj.subtype ); |
| | 1646 | + //mw.log( 'should call: ' + tObj.type + ' ' + tObj.subtype ); |
| 1717 | 1647 | this['type'][tObj.type][tObj.subtype].init( tObj ); |
| 1718 | 1648 | }, |
| 1719 | 1649 | doCloseTransition:function( tObj ) { |
| — | — | @@ -1727,7 +1657,7 @@ |
| 1728 | 1658 | }, |
| 1729 | 1659 | getOverlaySelector:function( tObj ) { |
| 1730 | 1660 | var overlay_selector_id = tObj.transAttrType + tObj.pClip.id; |
| 1731 | | - mw.log( 'f:getOverlaySelector: ' + overlay_selector_id + ' append to: ' + '#videoPlayer_' + tObj.pClip.embed.id ); |
| | 1661 | + //mw.log( 'f:getOverlaySelector: ' + overlay_selector_id + ' append to: ' + '#videoPlayer_' + tObj.pClip.embed.id ); |
| 1732 | 1662 | // make sure overlay_selector_id not already here: |
| 1733 | 1663 | if ( $j( '#' + overlay_selector_id ).length == 0 ) { |
| 1734 | 1664 | $j( '#' + tObj.pClip.embed.id ).prepend( '' + |
| — | — | @@ -1876,7 +1806,7 @@ |
| 1877 | 1807 | * Main animation loop called every MV_ANIMATION_CB_RATE or 34ms ~around 30frames per second~ |
| 1878 | 1808 | */ |
| 1879 | 1809 | run_transition: function() { |
| 1880 | | - _this = this; |
| | 1810 | + _this = this; |
| 1881 | 1811 | // If we have the playerElement update the time per run_transition call |
| 1882 | 1812 | if ( this.pClip.embed.playerElement && this.pClip.embed.playerElement.currentTime ) { |
| 1883 | 1813 | this.pClip.embed.currentTime = this.pClip.embed.playerElement.currentTime; |
| — | — | @@ -1898,11 +1828,16 @@ |
| 1899 | 1829 | this.animation_state = 1; |
| 1900 | 1830 | } |
| 1901 | 1831 | |
| 1902 | | - var percentage = this.pClip.embed.currentTime / this.dur; |
| | 1832 | + if( this.transAttrType=='transIn' ){ |
| | 1833 | + var percentage = ( this.pClip.embed.currentTime / this.dur ) ; |
| | 1834 | + } |
| 1903 | 1835 | |
| 1904 | | - //mw.log('percentage = ct:'+this.pClip.embed.currentTime + ' + ic:'+this.interValCount +' * cb:'+MV_ANIMATION_CB_RATE +' / ' + this.dur + ' = ' + percentage ); |
| 1905 | | - |
| 1906 | | - |
| | 1836 | + if( this.transAttrType=='transOut' ){ |
| | 1837 | + var percentage = ( this.pClip.embed.currentTime - |
| | 1838 | + (this.pClip.dur - this.dur) |
| | 1839 | + ) |
| | 1840 | + / this.dur ; |
| | 1841 | + } |
| 1907 | 1842 | // mw.log('cur percentage of transition: '+percentage); |
| 1908 | 1843 | // update state based on current time + cur_time_offset (for now just use pClip.embed.currentTime) |
| 1909 | 1844 | mvTransLib.doUpdate( this, percentage ); |