Advertisement
verygoodplugins

Untitled

Apr 1st, 2021
1,089
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. // Youtube API has to be in the global scope
  3. // See https://stackoverflow.com/questions/17753525/onyoutubeiframeapiready-inside-jquerydocument-ready
  4.  
  5. var YTdeferred = jQuery.Deferred();
  6. window.onYouTubeIframeAPIReady = function() {
  7.     YTdeferred.resolve(window.YT);
  8. };
  9.  
  10. jQuery(document).ready(function($){
  11.  
  12.     // Apply tags
  13.  
  14.     function applyTags(tags) {
  15.  
  16.         var data = {
  17.             'action'     : 'apply_tags',
  18.             'tags'       : tags,
  19.         };
  20.  
  21.         $.post(wpf_mt_ajax.ajaxurl, data);
  22.  
  23.     }
  24.  
  25.     function sortNumber(a,b) {
  26.         return a - b;
  27.     }
  28.  
  29.     // Get data attributes from player
  30.  
  31.     function getPlayerData(el) {
  32.  
  33.         var playerData = $(el).data();
  34.  
  35.         // Build object of registered timecodes and tags
  36.        
  37.         if( typeof playerData.wpf_tags_timecode !== 'undefined' && typeof playerData.wpf_timecode !== 'undefined' ) {
  38.  
  39.             playerData.timecodeTags = {};
  40.  
  41.             $.each(playerData, function(index, val) {
  42.  
  43.                  if(index.startsWith('wpf_timecode')) {
  44.  
  45.                     // Get index of timecode
  46.                     var i = index.replace('wpf_timecode', '');
  47.  
  48.                     // Convert mm:ss format to seconds
  49.                     var pieces = val.toString().split(":");
  50.  
  51.                     if(pieces.constructor === Array) {
  52.                         var seconds = pieces.pop();
  53.                         $.each(pieces, function(pieceIndex, pieceVal) {
  54.                             seconds = parseFloat(seconds) + (pieceVal * 60);
  55.                         });
  56.                     } else {
  57.                         var seconds = pieces;
  58.                     }
  59.  
  60.                     playerData.timecodeTags[seconds] = playerData['wpf_tags_timecode' + i];
  61.  
  62.                  }
  63.  
  64.             });
  65.  
  66.         }
  67.  
  68.         console.log('gotplayerdata');
  69.         console.dir(playerData);
  70.  
  71.         return playerData;
  72.  
  73.  
  74.     }
  75.  
  76.     // Mediaelement.js embeds
  77.  
  78.     $('video').each(function(index, el) {
  79.        
  80.         var playerData = getPlayerData(el);
  81.  
  82.         if ( typeof playerData.wpf_tags_start == 'undefined' && typeof playerData.wpf_tags_complete == 'undefined' && typeof playerData.timecodeTags == 'undefined' ) {
  83.             return;
  84.         }
  85.  
  86.         new MediaElement($(this).attr('id'), {
  87.  
  88.             success: function (mediaElement, domObject) {
  89.  
  90.                 if ( typeof playerData.wpf_tags_start != 'undefined' ) {
  91.  
  92.                     mediaElement.addEventListener('play', function(e) {
  93.  
  94.                         // mediaElement start video
  95.  
  96.                         applyTags(playerData.wpf_tags_start);
  97.  
  98.                     });
  99.  
  100.                 }
  101.  
  102.                 if ( typeof playerData.wpf_tags_complete != 'undefined' ) {
  103.  
  104.                     mediaElement.addEventListener('ended', function(e) {
  105.  
  106.                         // mediaElement video complete
  107.  
  108.                         applyTags(playerData.wpf_tags_complete);
  109.  
  110.                     });
  111.  
  112.                 }
  113.  
  114.                 if ( typeof playerData.timecodeTags != 'undefined' ) {
  115.  
  116.                     mediaElement.addEventListener('timeupdate', function(e) {
  117.  
  118.                         // mediaElement player progress
  119.  
  120.                         if(Object.keys(playerData.timecodeTags).length == 0)
  121.                             return;
  122.  
  123.                         $.each(playerData.timecodeTags, function(timecode, tags) {
  124.                              
  125.                              if(mediaElement.currentTime >= timecode) {
  126.                                 applyTags(tags);
  127.                                 delete playerData.timecodeTags[timecode];
  128.                              }
  129.  
  130.                         });
  131.  
  132.                     });
  133.  
  134.                 }
  135.  
  136.             }
  137.         });
  138.  
  139.     });
  140.  
  141.     // Initialize Vimeo player tracking on an element
  142.  
  143.     function initializeVimeo( el ) {
  144.  
  145.         var playerData = getPlayerData( el );
  146.  
  147.         var player = new Vimeo.Player( el );
  148.  
  149.         // Set it as ready
  150.  
  151.         $(el).attr( 'data-wpf_init', true );
  152.  
  153.         if ( typeof playerData.wpf_tags_start != 'undefined' ) {
  154.  
  155.             var startDone = false;
  156.  
  157.             player.on('play', function() {
  158.  
  159.                 // Vimeo started video
  160.                
  161.                 if(startDone == false) {
  162.                     startDone = true;
  163.                     applyTags(playerData.wpf_tags_start);
  164.                 }
  165.             });
  166.  
  167.         }
  168.  
  169.         if ( typeof playerData.wpf_tags_complete != 'undefined' ) {
  170.  
  171.             var completeDone = false;
  172.            
  173.             player.on('timeupdate', function(data) {
  174.  
  175.                 if (data.percent >= 0.95 && completeDone == false) {
  176.  
  177.                     // Vimeo 95% complete
  178.  
  179.                     completeDone = true;
  180.                     applyTags(playerData.wpf_tags_complete);
  181.                 }
  182.  
  183.             });
  184.  
  185.         }
  186.  
  187.         if ( typeof playerData.timecodeTags != 'undefined' ) {
  188.  
  189.             player.on('timeupdate', function(data) {
  190.  
  191.                 // Vimeo player progress
  192.  
  193.                 if( Object.keys( playerData.timecodeTags ).length == 0 ) {
  194.                     return;
  195.                 }
  196.  
  197.                 $.each(playerData.timecodeTags, function(timecode, tags) {
  198.  
  199.                     if ( timecode.endsWith('%') ) {
  200.  
  201.                         // Percentage based tracking
  202.  
  203.                         var percent = parseInt( timecode.replace('%', '') );
  204.                         percent = percent / 100;
  205.  
  206.                          if( data.percent >= percent ) {
  207.                             applyTags(tags);
  208.                             delete playerData.timecodeTags[timecode];
  209.                          }
  210.  
  211.                     } else {
  212.                      
  213.                          if(data.seconds >= timecode) {
  214.                             applyTags(tags);
  215.                             delete playerData.timecodeTags[timecode];
  216.                          }
  217.  
  218.                     }
  219.  
  220.                 });
  221.  
  222.             });
  223.  
  224.         }
  225.  
  226.     }
  227.  
  228.     // Initialize YouTube player tracking on an element
  229.  
  230.     function initializeYouTube( el ) {
  231.  
  232.         var playerData = getPlayerData( el );
  233.  
  234.         var playerId = $(el).attr('id');
  235.  
  236.         console.log('Init youtube with playerid ' + playerId + '. waiting for YTdeferred');
  237.  
  238.         if ( ! playerId ) {
  239.             playerId = 'ytplayer' + Math.floor(Math.random() * 100);
  240.             $(el).attr('id', playerId);
  241.         }
  242.  
  243.         var player;
  244.  
  245.         YTdeferred.done(function(YT) {
  246.  
  247.             // YTdeferred is set at the top of this file
  248.  
  249.             console.log('ytdeffered done. try to make player on ID ' + playerId);
  250.  
  251.             var appliedStart = false;
  252.  
  253.             player = new YT.Player( playerId, {
  254.                 events: {
  255.                     'onReady': onPlayerReady,
  256.                     'onStateChange': onPlayerStateChange
  257.                 },
  258.                 playerVars: {
  259.                     'autoplay': 1,
  260.                     'controls': 0,
  261.                     'autohide': 1,
  262.                     'wmode': 'opaque',
  263.                     'origin': 'https://dev.local'
  264.                 },
  265.             });
  266.  
  267.             // Set it as ready
  268.  
  269.             $(el).attr( 'data-wpf_init', true );
  270.  
  271.             // Elementor image overlay support
  272.             $('.elementor-custom-embed-image-overlay').parent().has( '#' + playerId ).click(function(event) {
  273.                
  274.                 if( typeof playerData.wpf_tags_start != 'undefined' ) {
  275.                     applyTags(playerData.wpf_tags_start);
  276.                     appliedStart = true;
  277.                 }
  278.  
  279.             });
  280.  
  281.             function onPlayerStateChange(event) {
  282.  
  283.                 console.log('STATECHANGE');
  284.                 console.dir(event);
  285.  
  286.                 if (event.data == YT.PlayerState.PLAYING && typeof playerData.wpf_tags_start != 'undefined' ) {
  287.  
  288.                     // YouTube started video
  289.  
  290.                     if( appliedStart == false ) {
  291.                         applyTags(playerData.wpf_tags_start);
  292.                         appliedStart = true;
  293.                     }
  294.  
  295.                 } else if( event.data == YT.PlayerState.ENDED && typeof playerData.wpf_tags_complete != 'undefined' ) {
  296.  
  297.                     // YouTube finished video
  298.  
  299.                     applyTags(playerData.wpf_tags_complete);
  300.  
  301.                 }
  302.  
  303.             }
  304.  
  305.             function onPlayerReady(event) {
  306.  
  307.                 console.log('playeready');
  308.  
  309.                 if ( typeof playerData.timecodeTags != 'undefined' ) {
  310.  
  311.                     console.log('timecode tags defined: ');
  312.                     console.dir(playerData.timecodeTags);
  313.  
  314.                     var videotime = 0;
  315.                     var timeupdater = null;
  316.  
  317.                     function updateTime() {
  318.  
  319.                         var oldTime = videotime;
  320.  
  321.                         if(player && player.getCurrentTime) {
  322.                             videotime = player.getCurrentTime();
  323.                         }
  324.  
  325.                         if(videotime !== oldTime) {
  326.                             onProgress(videotime);
  327.                         }
  328.                     }
  329.  
  330.                     timeupdater = setInterval(updateTime, 500);
  331.  
  332.                 }
  333.  
  334.             }
  335.  
  336.             function onProgress(currentTime) {
  337.  
  338.                 console.log( 'onProgress ' + currentTime );
  339.  
  340.                 // YouTube 500ms player progress
  341.  
  342.                 if(Object.keys(playerData.timecodeTags).length == 0) {
  343.                     return;
  344.                 }
  345.  
  346.                 $.each(playerData.timecodeTags, function(timecode, tags) {
  347.                      
  348.                      if(currentTime >= timecode) {
  349.                         console.log('APPLY TAGS');
  350.                         console.dir(tags);
  351.                         applyTags(tags);
  352.                         delete playerData.timecodeTags[timecode];
  353.                      }
  354.  
  355.                 });
  356.  
  357.             }
  358.  
  359.         });
  360.  
  361.     }
  362.  
  363.     // Initialize Wistia player tracking on an element
  364.  
  365.     function initializeWistia( el ) {
  366.  
  367.         var playerData = getPlayerData( el );
  368.  
  369.         window._wq = window._wq || [];
  370.  
  371.         var videoObject = Wistia.api( $(el).attr('id') );
  372.  
  373.         // Set it as ready
  374.  
  375.         $(el).attr( 'data-wpf_init', true );
  376.  
  377.         _wq.push({
  378.             // id: videoObject.hashedId(),
  379.             id: '_all',
  380.             onReady: function(video) {
  381.  
  382.                 if (typeof playerData.wpf_tags_start != 'undefined') {
  383.  
  384.                     var startDone = false;
  385.  
  386.                     video.bind( 'play', function () {
  387.  
  388.                         // Wistia start video
  389.  
  390.                         if (startDone == false) {
  391.  
  392.                             startDone = true;
  393.                             applyTags(playerData.wpf_tags_start);
  394.  
  395.                         }
  396.                     });
  397.  
  398.                 }
  399.  
  400.                 if ( typeof playerData.wpf_tags_complete != 'undefined' ) {
  401.  
  402.                     var completeDone = false;
  403.  
  404.                     video.bind('timechange', function(t) {
  405.  
  406.                         if ( t / video.duration() >= 0.95 && completeDone == false) {
  407.  
  408.                             // Wistia 95% complete
  409.  
  410.                             completeDone = true;
  411.                             applyTags(playerData.wpf_tags_complete);
  412.  
  413.                         }
  414.  
  415.                     });
  416.  
  417.                 }
  418.  
  419.                 if ( typeof playerData.timecodeTags != 'undefined' ) {
  420.  
  421.                     video.bind('timechange', function(t) {
  422.  
  423.                         if( Object.keys(playerData.timecodeTags).length == 0 ) {
  424.                             return;
  425.                         }
  426.  
  427.                         $.each(playerData.timecodeTags, function(timecode, tags) {
  428.  
  429.                             // Wistia player progress
  430.  
  431.                             if( t >= timecode ) {
  432.  
  433.                                 applyTags(tags);
  434.                                 delete playerData.timecodeTags[timecode];
  435.  
  436.                             }
  437.  
  438.                         });
  439.  
  440.                     });
  441.                 }
  442.             }
  443.  
  444.         });
  445.  
  446.     }
  447.  
  448.     // Initialize VooPlayer player tracking on an element
  449.  
  450.     function initializeVooPlayer( el ) {
  451.  
  452.         var playerData = getPlayerData( el );
  453.  
  454.         var playerId = $(el).attr('data-playerid');
  455.  
  456.         document.addEventListener('vooPlayerReady', function( event ) {
  457.  
  458.             // Set it as ready
  459.  
  460.             $(el).attr( 'data-wpf_init', true );
  461.  
  462.             // VooPlayer can't tell you the current time (annoying), so you have to create an array of all the timecodes
  463.             // you're interested in first, and pass them to vooAPI( playerId, 'getTime' ) and it will tell you if the current
  464.             // time is close to one of your defined timecodes.
  465.  
  466.             var completeTimecode = false;
  467.  
  468.             var startDone = false;
  469.             var completeDone = false;
  470.             var vooTimecodes = [ 1 ];
  471.  
  472.             // Merge in timecodes
  473.             if ( typeof playerData.timecodeTags != 'undefined' && Object.keys(playerData.timecodeTags).length != 0 ) {
  474.  
  475.                 $.each(playerData.timecodeTags, function(timecode, tags) {
  476.  
  477.                     vooTimecodes.push( parseInt( timecode ) );
  478.  
  479.                 });
  480.  
  481.             }
  482.  
  483.             vooAPI(playerId, 'getDuration', ['1'], function( duration ) {
  484.  
  485.                 completeTimecode = parseInt( Math.floor( duration * 0.95 ) );
  486.                 vooTimecodes.push( completeTimecode );
  487.  
  488.                 vooTimecodes.sort(sortNumber);
  489.  
  490.             });
  491.  
  492.             function checkVooProgress() {
  493.  
  494.                 vooAPI(playerId, 'getTime', vooTimecodes, checkTimecodes);
  495.  
  496.                 function checkTimecodes( time ) {
  497.  
  498.                     if (typeof playerData.wpf_tags_start != 'undefined') {
  499.  
  500.                         if (startDone == false) {
  501.  
  502.                             startDone = true;
  503.                             applyTags(playerData.wpf_tags_start);
  504.  
  505.                             vooTimecodes.splice( $.inArray('1', vooTimecodes), 1 );
  506.  
  507.                             vooAPI(playerId, 'getTime', vooTimecodes, checkTimecodes);
  508.  
  509.                         }
  510.  
  511.                     }
  512.  
  513.                     if ( typeof playerData.wpf_tags_complete != 'undefined' ) {
  514.  
  515.                         if (completeDone == false && time == completeTimecode ) {
  516.  
  517.                             completeDone = true;
  518.                             applyTags(playerData.wpf_tags_complete);
  519.  
  520.                             clearInterval( vooProgressChecker );
  521.  
  522.                         }
  523.  
  524.                     }
  525.  
  526.                     if ( typeof playerData.timecodeTags != 'undefined' ) {
  527.  
  528.                         if(Object.keys(playerData.timecodeTags).length == 0)
  529.                             return;
  530.  
  531.                         $.each(playerData.timecodeTags, function(timecode, tags) {
  532.  
  533.                             if( timecode == time ) {
  534.  
  535.                                 applyTags(tags);
  536.                                 delete playerData.timecodeTags[timecode];
  537.  
  538.                                 vooTimecodes.splice( $.inArray(timecode, vooTimecodes), 1 );
  539.  
  540.                                 vooAPI(playerId, 'getTime', vooTimecodes, checkTimecodes);
  541.  
  542.                             }
  543.  
  544.                         });
  545.  
  546.                     }
  547.  
  548.                 }
  549.  
  550.             }
  551.  
  552.             var vooProgressChecker = setInterval(checkVooProgress, 1000);
  553.  
  554.         });
  555.  
  556.     }
  557.  
  558.     // Generic initializer. Checks the type and calls the right function
  559.  
  560.     function initializePlayer( el ) {
  561.  
  562.         var playerType = $(el).attr('data-player_type');
  563.  
  564.         if ( typeof playerType == 'undefined' ) {
  565.             return; // If WP Fusion isn't set on this player
  566.         }
  567.  
  568.         console.log('playertype ' + playerType);
  569.  
  570.  
  571.         if( playerType == 'vimeo') {
  572.  
  573.             initializeVimeo( el );
  574.  
  575.         } else if( playerType == 'youtube') {
  576.  
  577.             initializeYouTube( el );
  578.  
  579.         } else if ( playerType == 'wistia') {
  580.  
  581.             initializeWistia( el );
  582.  
  583.         } else if ( playerType == 'vooplayer') {
  584.  
  585.             initializeVooPlayer( el );
  586.  
  587.         }
  588.  
  589.     }
  590.  
  591.     //
  592.     // Try to find videos to interact with
  593.     //
  594.  
  595.     // To start, on page load we'll go through all the iFrames and see if any are eligible
  596.  
  597.     function initializeIFrames() {
  598.  
  599.         $('iframe').each(function(index, el) {
  600.             initializePlayer( el );
  601.         });
  602.  
  603.     }
  604.  
  605.     setTimeout( initializeIFrames, 1000 );
  606.  
  607.     //initializeIFrames();
  608.  
  609.     // Some plugins, like Elementor, lazy-load their videos. Here we'll try and detect when an iframe has been inserted
  610.  
  611.     $(document).bind( 'DOMNodeInserted', function(e) {
  612.         if ( $(e.target).is( 'iframe' ) && typeof $(e.target).attr( 'data-player_type' ) !== 'undefined' ) {
  613.             console.log('inserted, init on ');
  614.             console.dir( e.target );
  615.             initializePlayer( e.target );
  616.         }
  617.     });
  618.  
  619. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement