Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

pornhub multiview javascript extension hack

By: a guest on Jun 20th, 2012  |  syntax: JavaScript  |  size: 9.90 KB  |  hits: 78  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* this code extends you pornhub experience ;-)
  2.         you need to apply it somehow on pornhub movie page
  3. */
  4. function create4Frames()
  5. {
  6.  
  7.   $(document.head).find("style")
  8.     .append("\
  9. ul.videos li div.wrap{\
  10.  width:140px;\
  11. }\
  12. ul.videos .img{\
  13. width:140px;\
  14. }\
  15. li{\
  16. display:inline-block;\
  17. }\
  18. .btn {width: 20px; height: 20px;\
  19.  border-radius:20px;\
  20.  background-color: red; \
  21.  position: absolute;\
  22.  top: 0px; left: 0px; \
  23.  z-index: 10000; \
  24.  border: 4px outset;\
  25.  cursor:pointer;\
  26.  box-shadow:rgba(0,0,0,1) 0 0 10px inset;\
  27.  -webkit-transition: background 0.5s;\
  28. }\
  29. .btn img{\
  30. \
  31. }\
  32.        \
  33. .btn.up{\
  34. border:4px inset;\
  35. background: darkred;\
  36. }\
  37. \
  38. .contFront, .contBack{\
  39.  position:absolute;\
  40.  top:0;\
  41.  left:0;\
  42.  -webkit-transition: opacity 1s;\
  43.  -webkit-backface-visibility:hidden;\
  44.  -webkit-transform: perspective(500px) rotateY(0deg);\
  45.  -webkit-perspective-origin: center;\
  46. }\
  47. .contBack{\
  48.  -webkit-transform: rotateY(180deg);\
  49.  opacity:0;\
  50. }\
  51. .contBack.rotated{\
  52.  -webkit-transform: perspective(500px) rotateY(0deg);\
  53.  opacity:1;\
  54. }\
  55. .contFront.rotated{\
  56.  -webkit-transform: perspective(500px) rotateY(-180deg);\
  57.  opacity:0;\
  58. }\
  59. .wrap{\
  60.  width:140px;\
  61. }\
  62. ul.videos .img{\
  63. width:140px;\
  64. }\
  65. .abox{\
  66.  background:rgba(0,0,0,0.5);\
  67.  width:0px;\
  68.  height:0px;\
  69.  position:absolute;\
  70.  z-index:9001;\
  71. }\
  72. ul.related{\
  73.  font-size:11px;\
  74.  color:white;\
  75.  margin:10px 10px;\
  76. }\
  77. ul.related li{\
  78.  vertical-align:top;\
  79.  display:inline-block; \
  80.  position:relative;  \
  81.  width:160px;\
  82.  heght:140px;\
  83.  margin:2px;\
  84.  color:rgba(255,255,255,0.5);\
  85.  -webkit-transition: color 0.5s;\
  86. }\
  87. ul.related li:hover{\
  88. color:rgba(255,255,255,1); \
  89. }\
  90. ul.related a{\
  91.  display:block;\
  92.  position:relative;  \
  93. }\
  94. ul.related div{\
  95. background:rgba(0,0,0,0.5); \
  96.  z-index:9000;\
  97. }\
  98. ul.related .title{\
  99.  position:absolute;\
  100.  bottom:0px;\
  101.  width:100%;\
  102. }\
  103. ul.related .duration{\
  104.  position:absolute;\
  105.  top:0px;\
  106. }\
  107. ul.related .votes{\
  108.  position:absolute;\
  109.  top:0px;\
  110.  right:0px\
  111. }\
  112. ul.related .votes.red{\
  113.  color:darkred;\
  114. }\
  115. .downArrow, .upArrow{\
  116.   background:red;\
  117.   width:20px;\
  118.   height:20px;\
  119.   position:fixed;\
  120.   top:30px;\
  121.   right:0;\
  122. }\
  123. .upArrow{\
  124. top:5px; \
  125. }\
  126. ");
  127.  
  128.  
  129.   var h = $(window).height();
  130.   var w = $(window).width();
  131.  
  132.   var vid = $("#video_1").val();//location.href.match(/viewkey=([^&]+)/)[1];
  133.    
  134.   var $pl1 = $("#playerDiv_1").detach().attr("height",h/2-5).attr("width",w/2-5);
  135.   //var $relatedUL = getRelated(vid);//$("#tab-related").detach();
  136.  
  137.  
  138.   var $wrapper = $("<div id='phmwrapper'>").css({width:w,height:h,background:"rgba(0,0,0,0.5)",position:"absolute",top:0,left:0,});
  139.   var $frTmp = $("<div class='frm'>").css({"width":w/2-2,"height":h/2-2,"position":"absolute","border":"1px solid silver","overflow":"hidden",
  140.                                            "background":"rgba(50,0,0,0.5)","z-index":10000});
  141.  
  142.   var $btn = $("<div class='btn'>");//.css({width:20,height:20,background:"red",position:"absolute",top:0,left:0,"z-index":10000});
  143.   $btn.toggle(
  144.     function(e){
  145.       $(this).toggleClass("up");//.siblings(".cont").animate({"margin-top":-h/2})
  146.       $(this).siblings(".contFront").toggleClass("rotated");
  147.       $(this).siblings(".contBack").toggleClass("rotated");
  148.     },
  149.     function(e){
  150.       $(this).toggleClass("up");//.siblings(".cont").animate({"margin-top":0})
  151.       $(this).siblings(".contFront").toggleClass("rotated");
  152.       $(this).siblings(".contBack").toggleClass("rotated");
  153.     }
  154.   );
  155.   $frTmp.append($btn);
  156.  
  157.   var $fr1 = $frTmp.clone(true).attr("id","frm1").css({top:0,left:0});
  158.   var $fr2 = $frTmp.clone(true).attr("id","frm2").css({top:0,right:0});
  159.   var $fr3 = $frTmp.clone(true).attr("id","frm3").css({bottom:0,left:0});
  160.   var $fr4 = $frTmp.clone(true).attr("id","frm4").css({bottom:0,right:0});
  161.      
  162.   $wrapper.append($fr1,$fr2,$fr3,$fr4);
  163.  
  164.  
  165.  
  166.   $fr1.append($("<div class='contFront'>").append($pl1));
  167.   $fr1.append($("<div class='contBack'>"));
  168.  
  169.  
  170.   $fr2.append($("<div class='contFront'>"));
  171.   $fr2.append($("<div class='contBack'>"));
  172.   $fr2.children(".btn").triggerHandler("click");
  173.  
  174.  
  175.   $fr3.append($("<div class='contFront'>"));
  176.   $fr3.append($("<div class='contBack'>"));
  177.   $fr3.children(".btn").triggerHandler("click");
  178.  
  179.  
  180.   $fr4.append($("<div class='contFront'>"));
  181.   $fr4.append($("<div class='contBack'>"));
  182.   $fr4.children(".btn").triggerHandler("click");
  183.  
  184.  
  185.   getRelated(vid,function($rel){
  186.     $("#frm1").children(".contBack").append($rel);
  187.   });
  188.   getRelated(vid,function($rel){
  189.     $("#frm2").children(".contBack").append($rel);
  190.   })
  191.   getRelated(vid,function($rel){
  192.     $("#frm3").children(".contBack").append($rel);    
  193.   })
  194.   getRelated(vid,function($rel){
  195.    
  196.     $("#frm4").children(".contBack").append($rel);
  197.   })
  198.  
  199.   //clean
  200.   //$(".section_wrapper, p.footer, #ph_net_bar").remove();
  201.   $(document.body).empty();
  202.   $(document.body).append($wrapper);
  203.  
  204.   //updateLinks();
  205. }
  206. function getRelated(vid,callback)
  207. {
  208.   $.ajax({"url":"http://www.pornhub.com/video_related.php?id="+vid+"/",
  209.           "dataType":"json"
  210.          })
  211.     .done(function(json){
  212.            
  213.       var rels = json.related;
  214.       var $ul = $("<ul class='related'>");
  215.      
  216.       for(var i=0;i<rels.length;i++){
  217.        
  218.         var img = rels[i][0];
  219.         var title = rels[i][1];
  220.         var duration = rels[i][2];
  221.         var votes = rels[i][3];
  222.         var linkVid = rels[i][4];
  223.        
  224.         var $li = $("<li><div class='title'>"+title+"</div><div class='duration'>"+duration+"</div><div class='votes "+(votes<50?"red":"")+"'>"+votes+"%</div></div></li>");
  225.         var $aimg = $("<a href='#"+linkVid+"'><img src='"+img+"' alt='' border=0/></a>");
  226.        
  227.         $aimg.click(function(){
  228.             loadNewMovie("#"+$(this).parents(".frm").attr("id"),this.href.replace(/[^#]+/,"").substring(1));
  229.             return false;
  230.         });
  231.        
  232.         $aimg.bind({
  233.           "mouseenter":function(){
  234.            
  235.             var linkVid = this.href.replace(/[^#]+/,"").substring(1);
  236.             var $box1 = $("<div class='abox'></div>").click(function(){loadNewMovie("#frm1",linkVid);return false;});
  237.             var $box2 = $("<div class='abox'></div>").click(function(){loadNewMovie("#frm2",linkVid);return false;});
  238.             var $box3 = $("<div class='abox'></div>").click(function(){loadNewMovie("#frm3",linkVid);return false;});
  239.             var $box4 = $("<div class='abox'></div>").click(function(){loadNewMovie("#frm4",linkVid);return false;});
  240.            
  241.             $(this).css({position:'relative'}).append($box1,$box2,$box3,$box4);
  242.            
  243.             $box1.css({top:0,left:0});
  244.             $box2.css({top:0,right:0});
  245.             $box3.css({bottom:0,left:0});
  246.             $box4.css({bottom:0,right:0});
  247.            
  248.             $(".abox").animate({width:50,height:40});
  249.             //startRo
  250.             rotatorObj = $(this).children("img");
  251.             startRotator();
  252.           },
  253.           "mouseleave":function(){
  254.             $(this).find(".abox").remove();
  255.             stopRotator();
  256.           }
  257.         });
  258.        
  259.         $li.prepend($aimg);
  260.         $ul.append($li);        
  261.       }
  262.      
  263.       var $da = $("<div class=downArrow>").bind({
  264.         "click":function(){          
  265.           $(this).siblings("ul").animate({"margin-top":"-="+($(this).parents(".frm").height()*0.8)});    
  266.         }
  267.       });
  268.      
  269.       var $du = $("<div class=upArrow>").bind({
  270.         "click":function(){
  271.          
  272.           $(this).siblings("ul").animate({"margin-top":"+="+($(this).parents(".frm").height()*0.8)});    
  273.         }
  274.       });      
  275.      
  276.       callback($("<div>").append($ul).append($da).append($du));
  277.          
  278.   });
  279. }
  280. var rotatorObj=null;
  281. var rotatorInt=null;
  282. var rotatorInd=1;
  283. function startRotator()
  284. {
  285.   clearInterval(rotatorInt);
  286.   rotatorInt = setInterval(function(){
  287.     var ln = $(rotatorObj).attr("src");
  288.    
  289.     $(rotatorObj).attr("src", ln.replace(/small\d*/,"small"+rotatorInd) );
  290.     rotatorInd=(rotatorInd)%16+1;
  291.   },700);
  292. }
  293. function stopRotator()
  294. {
  295.   rotatorInd=1;
  296.   var ln = $(rotatorObj).attr("src");
  297.   $(rotatorObj).attr("src", ln.replace(/small\d*/,"small") );
  298.   clearInterval(rotatorInt);  
  299.   rotatorObj=null;
  300. }
  301. function loadNewMovie(targ,vid)
  302. {
  303.   $(targ+" .btn").append("<img src='http://kapka.pl/_gfx/loadingAnim.gif'>");
  304.  
  305.   $.ajax({
  306.     url: vid,
  307.     cache: false
  308.   }).done(function( html ) {
  309.    
  310.     var matches = html.match("var flashvars = ([^;]+)");
  311.     var fv = jQuery.parseJSON(matches[1]);
  312.     $p = $("#playerDiv_1").clone();
  313.     $p2 = $p.find("param[name=flashvars]");
  314.     $p.find("param[name=flashvars]").attr("value",
  315.                                           $p2.attr("value").replace(/video_url=[^&]+/,"video_url="+fv.video_url)
  316.                                          .replace("autoreplay=false","autoreplay=true"));
  317.    
  318.     $(targ).children(".contFront, .contBack").empty();        
  319.     $(targ + " .contFront").append($p);
  320.    
  321.    
  322.     getRelated($("#video_1",html).val(),function($rel){
  323.       $(targ + " .contBack").append($rel);
  324.     });
  325.        
  326.     $(targ+" .btn").empty();
  327.    
  328.     if($(targ+" .btn").hasClass("up"))
  329.     {
  330.       $(targ+" .btn").removeClass("up");//.siblings(".cont").animate({"margin-top":0})
  331.       $(targ).children(".contFront, .contBack").removeClass("rotated");
  332.     }
  333.    
  334.   });
  335. }
  336.  
  337.  
  338.  
  339.  $(document.head).find("style")
  340.     .append("\
  341. @-webkit-keyframes logozoom {\n\
  342. \n\
  343.      0%,100% {\n\
  344.        left:0px;\n\
  345.        top: 0px;\n\
  346.        zoom: 1;\n\
  347.      }\n\
  348. \n\
  349.      50% {\n\
  350.        left:-5px;\n\
  351.        top: -5px;\n\
  352.        zoom: 1.1;\n\
  353.      }\n\
  354. \n\
  355. }\
  356. .logo-nf{\
  357. display:block;\
  358. width:200px;\
  359. }\
  360. .logo-nf{\n\
  361.  display:block;\
  362.  -webkit-animation: logozoom 1s infinite;\n\
  363. }\n");
  364.  
  365. $(".logo-nf a img").unwrap().unbind("click").click(create4Frames);
create a new version of this paste RAW Paste Data