API tools faq
paste
HoangNamMapper

Snuckls

HoangNamMapper
Mar 20th, 2017
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.75 KB | None | 0 0
raw download clone embed print report
  1.  
  2.     //closing the popup
  3.     var video_watched_count = 0;
  4.     $(document).ready(function () {
  5.         $(".closeBtn").click(function () {
  6.             if (typeof player.stopVideo !== "undefined")
  7.                 player.stopVideo();
  8.             //refresh the video feed if the user watches more than one video
  9.             if (video_watched_count > 0) {
  10.                 showloader();
  11.                 window.location = "http://www.snuckls.com/video/ticketdetails";
  12.             }
  13.             $(".dialog_box_wrap").hide();
  14.         });
  15.     });
  16.  
  17.     var emoji_base_url = "https://s3-us-west-1.amazonaws.com/baymack/unicodeexpressions/large/";
  18.  
  19.     //function to get the perticuklar video details
  20.     $('.videos-select').click(function (e) {
  21.         e.preventDefault();
  22.         //get the video index data
  23.         var video_index = $(this).attr('video-index');
  24.         video_session_index = video_index;
  25.         load_video_by_index(video_index);
  26.     });
  27.  
  28.     function load_video_by_index(video_index)
  29.     {
  30.          
  31.    
  32.         video_session_index = video_index;
  33.         var options = {};
  34.        
  35.         $("#video_list").hide( );
  36.        
  37.         $("#video_details").hide( "drop", {direction: "left"}, 100 );
  38.         $("#video_details").show( "drop", {direction: "top"}, 500 );
  39.        
  40.  
  41.         //$( "#video_details" ).effect( 'drop', options, 500 );
  42.        
  43.         //alert(video_index);
  44.         showloader();
  45.         $.ajax({
  46.             url: "http://www.snuckls.com/video/getthevideoindexdata/" + video_index,
  47.             dataType: "JSON",
  48.             success: function (response) {
  49.                 if (response.response == 'success') {
  50.                     //hide the divs
  51.                     $('#emojis').hide();
  52.                     $('#play-load-bar').show();
  53.                     $('#video_response_id').hide();
  54.                    
  55.                     $('.video-width').width($("#intImage").width());
  56.                     $('.video-width').height($("#intImage").height());
  57.                     $("#intImage").hide();
  58.                    
  59.                    
  60.                     //console.log(response.data);
  61.                     //console.log(player);
  62.                     video_id = response.data.videoId;
  63.                    
  64.                     $('#channel_image').attr('src', response.data.channelThumbUrl);
  65.                     $('#channel_description').html(response.data.description.substring(0, 25) + '....');
  66.                     $('#videoTitle').html(response.data.videoTitle.substring(0, 25) + '....');
  67.                     $('#channel_upload_date').html(response.data.uploadTime);
  68.                     $('#share_video').attr('href', 'https://www.facebook.com/dialog/feed?app_id=485175661693050&description=Check+this+awesome+video&e2e=%7B%7D&link=https://www.youtube.com/watch?v=' + response.data.videoId + '&locale=en_US&name=&next=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FP5DLcu0KGJB.js%3Fversion%3D42%23cb%3Df1cf7ac9d58984%26domain%3Dsnuckls.com%26origin%3Dhttp%253A%252F%252Fsnuckls.com%252Ff50881fd46c3c4%26relation%3Dopener%26frame%3Df1cad30e02a5bf4%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v2.7&_rdr"');
  69.                     if (typeof player.loadVideoById === "undefined")
  70.                         $('#video_player').attr('src', 'https://www.youtube.com/embed/' + response.data.videoId + '?enablejsapi=1&autoplay=false&controls=0&rel=0&showinfo=0&egm=0&showsearch=0&modestbranding=1&iv_load_policy=3&disablekb=1&loop=0&start=0');
  71.                     else
  72.                         player.loadVideoById(response.data.videoId, 0);
  73.                     callPlayer('video_player', 'stopVideo');
  74.  
  75.                     $('#video_emoji_title').html(response.data.emojiTitle);
  76.                    
  77.                     //render the emojis
  78. //            var emoji_html='';
  79. //            response.data.emojiIds.forEach(function(entry) {
  80.                     //console.log(entry);
  81.                     var emoji_html = '<li><a href="javascript:" class="border-btn emojiclick" emojiid="' + 1 + '">Rock</a></li>'+'<li><a href="javascript:" class="border-btn emojiclick" emojiid="' + 2 + '">Pop</a></li>'+'<li><a href="javascript:" class="border-btn emojiclick" emojiid="' + 3 + '">Hip Hop</a></li>'+'<li><a href="javascript:" class="border-btn emojiclick" emojiid="' + 4 + '">Other</a></li>';
  82. //             });
  83.                     //console.log(emoji_html);
  84.                     $("#video_guess_emoji").html(emoji_html);
  85.                     //rendering the emoji ends here
  86.  
  87.  
  88.                     //initialize the progressbar properties starts
  89.                     reset_values();
  90.                     var video_range = 0;
  91.                     var video_duration = Number(response.data.duration);
  92.                     var video_lowerLimit = Number(response.data.lowerLimit);
  93.                     var video_upperLimit = Number(response.data.upperLimit);
  94.                     if (video_duration <= video_lowerLimit)
  95.                         video_range = video_duration - 2;
  96.                     else if (video_duration <= response.data.upperLimit)
  97.                         video_range = randomIntFromInterval(video_lowerLimit, (video_duration - 2));
  98.                     else
  99.                         video_range = randomIntFromInterval(video_lowerLimit, video_upperLimit);
  100.                     range = video_range;
  101.                     $('#range').html(video_range);
  102.                     $('#progress-value').html('0/' + video_range);
  103.                     setBarWidth(".style-1 span", ".style-1 em", "width", 0);
  104.                    
  105.                     //ending the video properties
  106.                     closeloader();
  107.                 }
  108.                 else
  109.                     closeloader();
  110.             },
  111.             error: function (response) {
  112.                 //closeloader();
  113.             }
  114.         });
  115.  
  116.         $(".dialog_box_wrap").show();
  117.     }
  118.  
  119.  
  120.     //initilizing the youtube player and the youtube related functions
  121.     var timer_error = 1;
  122.     var currenttime = 0;
  123.     var video_id = '';
  124.     var timeout;
  125.     var systemduration_timeout;
  126.     var systemduration_timer = 0;
  127.     var emoji_shown = 0;
  128.     var range = 0;
  129.     var video_session_index = 0;
  130.     var user_watched_time = 0;
  131.     // 2. This code loads the IFrame Player API code asynchronously.
  132.     var tag = document.createElement('script');
  133.     tag.src = "https://www.youtube.com/iframe_api";
  134.     var firstScriptTag = document.getElementsByTagName('script')[0];
  135.     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  136.  
  137.     // 3. This function creates an <iframe> (and YouTube player)
  138.     //    after the API code downloads.
  139.     var player;
  140.     window.onYouTubeIframeAPIReady = function () {
  141.         console.log('onYouTubeIframeAPIReady');
  142.         player = new YT.Player('video_player', {
  143.             // playerVars: { 'enablejsapi':1,'autoplay':0,'controls':0,'rel':0,'showinfo':0,'egm':0,'showsearch':0,'modestbranding':1,'iv_load_policy':3,'disablekb':0,'loop':0},
  144.             events: {
  145.                 'onReady': onPlayerReady,
  146.                 'onStateChange': onPlayerStateChange,
  147.                 'onError': onPlayerError
  148.             }
  149.         });
  150.  
  151.         setTimeout(systemduration, 1000);
  152.     }
  153.  
  154.  
  155.     // 4. The API will call this function when the video player is ready.
  156.     function onPlayerReady(event) {
  157.         // console.log('player ready event'+event);
  158.         // event.target.pauseVideo();
  159.         //console.log('player ready');
  160.         clearTimeout(timeout);
  161.         clearTimeout(systemduration_timeout);
  162.         currenttime = 0;
  163.         systemduration_timer = 0;
  164.  
  165.  
  166.     }
  167.  
  168.     // 5. The API calls this function when the player's state changes.
  169.     //    The function indicates that when playing a video (state=1),
  170.     //    the player should play for six seconds and then stop.
  171.     var done = false;
  172.     function onPlayerStateChange(event) {
  173.         //console.log(Math.floor(player.getCurrentTime()));
  174.         //console.log(player.getDuration()-1);
  175.         console.log('playser state change');
  176.         console.log(event);
  177.  
  178.         if (event.data == 1) {
  179.             currenttime = Math.floor(player.getCurrentTime());
  180.             timeout = setTimeout(timer, 1000);
  181.         }
  182.         else {
  183.             console.log('paused');
  184.             clearTimeout(timeout);
  185.         }
  186.     }
  187.  
  188.  
  189.     function timer() {
  190.         currenttime = currenttime + 1;
  191.         if(currenttime<5) timer_error= 0;
  192.         else{
  193.             if(timer_error==1){
  194. //                console.log("timer error sending to ga "+video_id +"  "+ currenttime);
  195.                 ga('send', {
  196.                     hitType: 'event',
  197.                     eventCategory: 'Timer',
  198.                     eventAction: 'stopped-desktop',
  199.                     eventLabel: video_id,
  200.                     eventValue : currenttime
  201.                 });
  202.                 timer_error=0;
  203.             }
  204.         }
  205.         console.log(currenttime);
  206.         //console.log(Math.floor(((currenttime/(player.getDuration()-1))*100)));
  207.         //change the timer value
  208.         if (currenttime <= range)
  209.             $('#progress-value').html(currenttime + '/' + range);
  210.  
  211.         //display the emojis if the range of the video matches
  212.         if (currenttime == range || currenttime == (player.getDuration() - 1)) {
  213.             //enable the controls
  214.             //show the emojis
  215.             if (emoji_shown == 0) {
  216.                 console.log('show emoji');
  217.                 $('#play-load-bar').hide();
  218.                 $('#emojis').show();
  219.                 emoji_shown = 1;
  220.             }
  221.         }
  222.         //calculate the percentage for progrss bar
  223.         var completeperc = Math.ceil(((currenttime / range) * 100));
  224.         //console.log('perc:'+completeperc);
  225.         if (completeperc <= 100)
  226.             setBarWidth(".style-1 span", ".style-1 em", "width", completeperc);
  227.  
  228.         timeout = setTimeout(timer, 1000);
  229.     }
  230.  
  231.     function onPlayerError(event) {
  232.         console.log(event);
  233.         skip_video_a(0);
  234.         window.location = "http://www.snuckls.com/video/ticketdetails";
  235.         //console.log('jadfa');
  236.     }
  237.     function stopVideo() {
  238.         player.stopVideo();
  239.     }
  240.  
  241.     //functio to record the system durtion
  242.     function systemduration() {
  243.         systemduration_timer = systemduration_timer + 1;
  244.         //console.log(systemduration_timer);
  245.         systemduration_timeout = setTimeout(systemduration, 1000);
  246.     }
  247.  
  248.  
  249.     //after clickng on emojis
  250.     $('body').on('click', 'a.emojiclick', function (e) {
  251.         //$('.emojiclick').click(function(e){
  252.         e.preventDefault();
  253.         //clearTimeout(systemduration_timeout);
  254.         var emojiid = $(this).attr('emojiid');
  255.         user_watched_time = Math.floor(player.getCurrentTime());
  256.         var total_video_duration = Math.floor(player.getDuration());
  257.         var progress_value = range;
  258.  
  259.         if (systemduration_timer < user_watched_time)
  260.             systemduration_timer = user_watched_time + 3;
  261.  
  262.         $('#emojis').hide();
  263.         $('#emojiSendning').show();
  264.         //console.log(emojiid+'/'+user_watched_time+'/'+total_video_duration+'/'+progress_value+'/'+systemduration_timer+'/'+video_session_index);
  265.         //alert(emojiid);
  266.         //send the data to
  267.         $.ajax({
  268.             url: "http://www.snuckls.com/video/videofeedback",
  269.             type: 'POST',
  270.             dataType: 'json',
  271.             data: {
  272.                 emojiid: emojiid,
  273.                 user_watched_time: user_watched_time,
  274.                 total_video_duration: total_video_duration,
  275.                 progress_value: progress_value,
  276.                 systemduration_timer: systemduration_timer,
  277.                 video_session_index: video_session_index
  278.             },
  279.             success: function (response) {
  280.                 $('#emojis').hide();
  281.                 $('#emojiSendning').hide();
  282.                 video_watched_count = video_watched_count + 1;
  283.                 if (response.response == "fail") {
  284.                     //ShowDialogBox('Video Feedback Error', 'Something went wrong', 'OK', '', '', '');
  285.                     $('#emojis').show();
  286.                 }
  287.                 else {
  288.                     if (response.direct_redirect == 1)
  289.                         window.location = response.next_video_url;
  290.                     else {
  291.                         $('#footer_id').show();
  292.                         $('#footer_url').attr('href', response.next_video_url);
  293.                         var next_video_url_array = response.next_video_url.split('/');
  294.                         $('#nextvideo').attr('video-index', next_video_url_array[next_video_url_array.length - 1]);
  295.                         if (response.response_ep.hasOwnProperty("feedbackMsg")) {
  296.                             $('#video_response_id').show();
  297.  
  298.                             var pattern = /wrong/;
  299.                             if (pattern.test(response.response_ep.feedbackMsg))
  300.                                 $('#video_response_h2').css('color', 'red');
  301.  
  302.                             $('#video_response_h2').html(response.response_ep.feedbackMsg);
  303.                             $('#notification-txt').html(response.response_ep.feedbackSubMsg);
  304.                             $("#video_response_ul").html('');
  305.                             response.response_ep.progressList.forEach(function (entry) {
  306.  
  307.                                  var cssclass = '';
  308.                                 if (entry == 1)
  309.                                     cssclass = "selected";
  310.                                 if (entry == 0)
  311.                                     cssclass = "";
  312.                                 $("#video_response_ul").append('<li  class="' + cssclass + '"></li>');
  313.                             });
  314.  
  315.                         }
  316.  
  317.                         //if(response.response_ep.)
  318.                     }
  319.                 }
  320.  
  321.             },
  322.             error: function (response) {
  323.                 $('#emojis').show();
  324.  
  325.             }
  326.         });
  327.  
  328.     });
  329.  
  330.  
  331.     $(".more-btn").on('click', function () {
  332.         //console.log($(".more-options"));
  333.         $(".more-options").toggle();
  334.     });
  335.  
  336.  
  337.     ///functio to skip the video
  338.     $('#skipvideo_a').click(function (e) {
  339.         e.preventDefault();
  340.         skip_video_a(1);
  341.         window.location = "http://www.snuckls.com/video/ticketdetails";
  342.     });
  343.  
  344.     //function to skip the video
  345.     function skip_video_a() {
  346.         $.ajax({
  347.             url: "http://www.snuckls.com/video/skipvideo",
  348.             type: 'POST',
  349.             dataType: 'json',
  350.             data: {video_session_index: video_session_index, flag: flag},
  351.             success: function (response) {
  352.                 console.log(response);
  353.             },
  354.             error: function (response) {
  355.  
  356.             }
  357.         });
  358.     }
  359.  
  360.     //function to set the all initial values to zero
  361.     function reset_values() {
  362.  
  363.         currenttime = 0;
  364.         timeout;
  365.         systemduration_timeout;
  366.         systemduration_timer = 0;
  367.         emoji_shown = 0;
  368.         range = 0;
  369.         //video_session_index=0;
  370.         user_watched_time = 0;
  371.  
  372.     }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!