☰

vk.com

Layout Design - bigger video and thumbs and Info on precent video and some navigation

  1. /// ==UserScript==
  2. // @name			vk.com
  3. // @namespace		http://use.i.E.your.homepage/
  4. // @version			0.25
  5. // @description     Layout Design - bigger video and thumbs and Info on precent video and some navigation  
  6.  
  7. // @match			*vk.com/*
  8. // @require			http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
  9. // @require 		https://greasyfork.org/scripts/386-waituntilexists/code/waitUntilExists.js?version=5026
  10. // @require			http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js
  11.  
  12. // @grant           GM_getValue
  13. // @grant           GM_setValue
  14. // @grant           GM_deleteValue
  15.  
  16. // @created			2014-09-27
  17. // @released		2014-00-00
  18. // @updated			2014-00-00
  19. // @history         @version 0.25 - first version: @released - 2015-02-11
  20.  
  21. // @compatible		Greasemonkey, Tampermonkey
  22. // @license         GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html) 
  23. // @copyright		2014+, Magnus Fohlström
  24. // ==/UserScript==
  25.  
  26. /*global $, jQuery*/
  27. /*jshint -W014, -W030*/
  28. // -W014, laxbreak, Bad line breaking before '+'
  29. // -W030, Expected assignment or funtion call insted saw an expression
  30.  
  31. //-----------------------------------------------------------------------------------------------------------------------------------------
  32.  
  33. (function ($) {
  34.     
  35.     var timeThis = performance.now(),
  36.         mainWidth = 1357,
  37.         lstate = 0;
  38.     
  39.     function l( name, fn, showthis ){  if( showthis == 1 || lstate == showthis ) console.log( name, fn !== undefined ? fn : '' );  }
  40.     
  41.     String.prototype.formatString = function(){
  42.         return this.toString()    
  43.                     .split(/\s+/g).join(' ')
  44.                     .split('¤').join('')
  45.                     .split('{').join('{\n\t\t')
  46.                     .split('; ').join(';')
  47.                     .split(';').join(';\n\t\t')
  48.                     .split('*/').join('*/\n')
  49.                     .split('\t\t').join('\t')
  50.                     .split('}').join('}\n');
  51.     };
  52.     
  53.     $( '<style id="InsertCssZoom"></style>' +
  54.        '<style id="InsertCssBasic"></style>' +
  55.        '<style id="inputPopupCss" ></style>' ).appendTo('head');
  56.         
  57.     function refreshElement( elem , speed ) //refreshElement('.videoPlayer','slow');
  58.     {
  59.         var data = $( elem ).html();
  60.         $( elem ).hide().html( data ).fadeIn( speed );
  61.     }
  62.     
  63.     function playerSize()
  64.     {
  65.         var sideWidth = 120,
  66.             ContWidth = 1500,
  67.             
  68.             bodyWidth0 = window.innerWidth - sideWidth,
  69.             bodyWidth1 = bodyWidth0 > ContWidth ? ContWidth : bodyWidth0,
  70.             zoomWidth0 = bodyWidth1 / $('#video_player').width(),
  71.             
  72.             zoomWidth = zoomWidth0 < 1 ? 1 : zoomWidth0;
  73.         
  74.         $( '#InsertCssZoom' ).text( '#video_player { zoom:' + zoomWidth + '; }' );
  75.     }
  76.     
  77.     function init(input)
  78.     {
  79.         var InsertCssBasic, insertReload, newWidth, divider, insertThis;
  80.         
  81.         insertReload = 
  82.     //        '<div class="divider fl_r">|</div>' +
  83.             '<div id="NormalizeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Normalize</div>' +
  84.             '<div id="MaximizeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Maximize</div>' +
  85.             '<div class="divider fl_r">|</div>' +
  86.             '<div id="reloadThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Reload</div>' +
  87.             '<div class="divider fl_r">|</div>' +
  88.             '<div id="ChangeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Change Title</div>';
  89.         
  90.     //    $( insertReload ).appendTo('#mv_top_controls');
  91.     //    $( insertReload ).insertAfter('.mv_share_actions.fl_l .fl_r .mv_views_count.fl_r');
  92.     
  93.         insertThis = setInterval(function(){ $('.mv_info_block.fl_l').size() !== 0 && $('#NormalizeThis').size() === 0 && ( $( insertReload ).appendTo('.mv_info_block.fl_l'), clearInterval(insertThis) ); },8);
  94.         
  95.         divider = 4;
  96.         newWidth = input !== undefined ? input : mainWidth;
  97.         InsertCssBasic = 
  98.             '.mv_cont {'
  99.         +	'	top: 30px !important;'
  100.         +	'	}'
  101.         +	'#mv_box {'
  102.         +	'	background: #232430;'
  103.         +	'	}'
  104.         +	'.mv_top_button {'
  105.         +	'	background: transparent;'
  106.         +	'	color: rgb(119, 119, 119);'
  107.         +	'	margin-top: -4px;'
  108.         +	'	}'
  109.         +	'.video_box_wrap {'
  110.         +	'	width: initial !important;'
  111.         +	'	height: initial !important;'
  112.         +	'	}'
  113.         +	'#mv_min_layer {'
  114.         +	'	width: calc(100% - 250px);'
  115.         +	'	}'
  116.         +	'#mv_min_title {'
  117.         +	'	max-width: 100% !important;'
  118.         +	'	}'
  119.         +	'#mv_title {'
  120.         +	'	width: 100%;'
  121.         +	'	max-width: 100%;'
  122.         +	'	}'
  123.         +	'#mv_min_title:hover, .mv_top_button:hover {'
  124.         +	'	cursor: pointer;'
  125.         +	'	color: rgb(7, 7, 207) !important;'
  126.         +	'	}'
  127.         +	'.fl_r.mv_title_panel {'
  128.         +	'	width: calc(100% - 65px);'
  129.         +	'	}'
  130.         +	'.mv_info_block.fl_l {'
  131.         +	'	width: 100%;'
  132.         +	'	}'
  133.         
  134.         +	'#page_layout {'
  135.         +	'	width: '+newWidth+'px !important;'
  136.         +	'	}'
  137.         
  138.         +	'#page_body {'
  139.         +	'	width: calc(100% - 165px) !important;'
  140.         +	'	}'
  141.         +	'.video_compact_view #choose_video_rows .video_row, .video_compact_view #video_rows .video_row, '
  142.         +	'.video_compact_view #video_search_rows .video_row, .video_compact_view .search_media_rows.video_type .video_row {'
  143.         +	'	height: initial;'
  144.         +	'	margin-bottom: 20px;'
  145.         +	'	width: calc(('+newWidth+'px - 165px) / '+divider+' - 23px);'
  146.         +	'	}'
  147.         +	'.video_compact_view #choose_video_rows .video_row_thumb, .video_compact_view #video_rows .video_row_thumb, '
  148.         +	'.video_compact_view #video_search_rows .video_row_thumb, .video_compact_view .search_media_rows.video_type .video_row_thumb, '
  149.         +	'.video_compact_view #choose_video_rows .video_image_div, .video_compact_view .search_media_rows.video_type .video_image_div, '
  150.         +	'.video_compact_view #video_rows .video_image_div, .video_compact_view #video_search_rows .video_image_div {'
  151.         +	'	width: inherit;'
  152.         +	'	}'
  153.         +	'.video_compact_view #choose_video_rows .video_image_div, .video_compact_view #video_rows .video_image_div, '
  154.         +	'.video_compact_view #video_search_rows .video_image_div, .video_compact_view .search_media_rows.video_type .video_image_div, '
  155.         +	'.video_compact_view #choose_video_rows .video_row_thumb, .video_compact_view #video_rows .video_row_thumb, '
  156.         +	'.video_compact_view #video_search_rows .video_row_thumb, .video_compact_view .search_media_rows.video_type .video_row_thumb {'
  157.         +	'	height: calc((('+newWidth+'px - 165px) / '+divider+' - 23px) * (106/191));'
  158.         +	'	}'
  159.         +	'#search_content .video_row .video_row_info_name a, #video_content .video_row .video_row_info_name a, '
  160.         +	'#choose_video_content .video_row .video_row_info_name a, #pva_video_tags .video_row .video_row_info_name a {'
  161.         +	'	white-space: normal;'
  162.         +	'	overflow: hidden;'
  163.         +	'	text-overflow: ellipsis;'
  164.         +	'	width: calc(('+newWidth+'px - 165px) / '+divider+' - 23px) !important;'
  165.         +	'	display: -webkit-box;'
  166.         +	'	height: calc( 11px * 1.4 * 3 );'
  167.         +	'	font-size: 11px;'
  168.         +	'	line-height: 1.4;'
  169.         +	'	-webkit-line-clamp: 3;'
  170.         +	'	-webkit-box-orient: vertical;'
  171.         +	'	}';
  172.      
  173.         $( '#InsertCssBasic' ).html( InsertCssBasic.formatString() );
  174.         
  175.         $( '#InsertCssBasic' ).append( '#stl_side { left: '+( $( '#page_layout' ).offset().left )+'px !important; }'.formatString() );
  176.     }
  177.     
  178.     init();
  179.     
  180.     $( window ).resize(function(){ init(); });
  181.     
  182.     $( '#NormalizeThis' ).waitUntilExists(function(){ 
  183.                 
  184.         function Maximize()
  185.         {
  186.             GM_setValue('VK_playerState', 'Maximize' );
  187.             
  188.             playerSize();
  189.             
  190.             $(".mv_top_button:contains('Maximize')").hide();
  191.             $(".mv_top_button:contains('Normalize')").show();
  192.         }
  193.         function Normalize()
  194.         {
  195.             GM_setValue('VK_playerState', 'Normalize' );
  196.             
  197.             $( '#InsertCssZoom' ).empty();
  198.             
  199.             $(".mv_top_button:contains('Normalize')").hide();
  200.             $(".mv_top_button:contains('Maximize')").show();    
  201.         }
  202.         
  203.         GM_getValue('VK_playerState') == 'Maximize' ? Maximize() : Normalize();
  204.         
  205.         $("#NormalizeThis").on('click', Normalize );
  206.         
  207.         $("#MaximizeThis").on('click', Maximize );
  208.         
  209.         $('#reloadThis').on('click', function() { 
  210.             refreshElement('#mv_content .video_box_wrap', 2500 );
  211.         });
  212.         
  213.         $('#ChangeThis, #ChangeThis font').on('mouseup', function(e){ 
  214.             this == e.target && e.which == 1 && rewriteTitle(); 
  215.         });    
  216.     });
  217.     
  218.     function runflashvars()
  219.     {
  220.         var flashvars,Seconds_1,Seconds,xformat,time;
  221.         
  222.         flashvars = $('embed').attr('flashvars');
  223.         flashvars = flashvars !== undefined ? flashvars : '';
  224.         Seconds_1 = flashvars.split('&duration=');
  225.         Seconds = Seconds_1[1] === undefined ? '' : Seconds_1[1].split('&eid1=');
  226.         Seconds = Seconds[0] === undefined ? 0 : Seconds[0];
  227.         xformat = ( Seconds < 3600 ) ? 'mm:ss' : 'H:mm:ss';
  228.         time = moment().startOf('day').seconds(Seconds).format(xformat);
  229.         
  230.         console.log('sec',Seconds);
  231.         // Display how long the video clip are      
  232.         if( $('#VideoLength').size() === 0 ) 
  233.         {
  234.             $('<div id="VideoLength" class="mv_info mv_duration" style="margin-left: 20px;">Video Length:<span style="padding-left:22px;">' + time + '</span></div><br class="my"><div class="clear"></div>').insertAfter('.mv_info_panel.clear_fix');
  235.         }
  236.         
  237.         // Show a list of Qualities that are playable for this clip 
  238.         window.qualities = '';     
  239.         function stp( qual,input ){ window.qualities += '<span class="mv_info mv_quality" style="float: none !important; margin-bottom: 10px;"><span>' + qual + '</span> - ' + input + '</span><br>'; }
  240.         
  241.         if ( flashvars.search('&url720=' ) > 0 ) { stp('720p','HD'); }
  242.         if ( flashvars.search('&url480=' ) > 0 ) { stp('480p','SD'); }
  243.         if ( flashvars.search('&url360=' ) > 0 ) { stp('360p','Normal'); }
  244.         if ( flashvars.search('&url240=' ) > 0 ) { stp('240p','Almost'); }
  245.         if ( flashvars.search('&url180=' ) > 0 ) { stp('180p','Lowest'); }
  246.         
  247.         $( '<div class="mv_info mv_quality_lable" style="margin-left: 20px; float:left;">Video Qualities:</div> <div class="mv_info mv_qualities" style="float:left; margin-left:15px;">' + window.qualities + '</div>' ).insertAfter('br.my');
  248.     
  249.     }
  250.     
  251.     $( '#video_player' ).waitUntilExists(function() { $( '#VideoLength' ).size() === 0 && runflashvars(); });
  252.     
  253.     // Re-sizing inputField
  254.     function sizingInput( str )
  255.     {
  256.         str = str === undefined ? ' ' : str;
  257.         
  258.         var texLen = str.length,
  259.             parLen = $('#toInputingThis').width() - 6,
  260.             inputWidth = ( texLen * 5.2 ) + 21;
  261.         
  262.         // this makes sure that inputfield dont get bigger than avaible space
  263.         inputWidth = inputWidth > parLen ? parLen : inputWidth;
  264.         
  265.         // check if string is longer than, then the field gets bigger, otherwise it vill stay the same as default.
  266.         inputWidth = texLen > 34 ? inputWidth : 200;
  267.         
  268.         // makes the change as defined 
  269.         $( '#txtInputThis' ).width( inputWidth );  
  270.     }
  271.     
  272.     $( window ).resize(function() {
  273.         playerSize();
  274.         sizingInput( $( '#txtInputThis' ).val() );
  275.     });
  276.     
  277.     // this is usefull when same page reloads, with new uniqe URL && only applicable within 10s from clicking reload.
  278.     var mainTitleHead = '#mv_title',
  279.         docLoc = window.location.href,
  280.         lastUrl = GM_getValue('VK_lastUrl') === docLoc,
  281.         ifReloaded = GM_getValue('VK_title_old') !== undefined && lastUrl;
  282.     
  283.     if( lastUrl && $.now() - GM_getValue('VK_date') < 10000  )
  284.     {
  285.         $( '#mv_title' ).waitUntilExists(function(){ 
  286.             var changeTo = GM_getValue('VK_title');
  287.             $( '#txtInputThis' ).val( changeTo );            
  288.             $( mainTitleHead + ', title').text( changeTo ); 
  289.         });
  290.     }
  291.     
  292.     function rewriteTitle()
  293.     {        
  294.         function thePopup()
  295.         {
  296.             var inputPopup, inputPopupCss, thisTitle, author;
  297.             
  298.             inputPopup =
  299.                 '<div id="space"class="ymvy"></div>'
  300.             +	'<div class="divider fl_r">|</div>'
  301.             +	'<div id="CancelsNowThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Cancel</div>'
  302.             +	'<div class="divider fl_r">|</div>'
  303.             +	'<div id="SaveReloadThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Reload</div>'
  304.             +	'<div class="divider fl_r">|</div>'
  305.             +	'<div id="justupdateThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Update</div>'
  306.             +	'<div class="divider fl_r">|</div>'
  307.             +	'<div id="toInputingThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">'
  308.             +		'<input id="txtInputThis" type="text" class="" value=""/>'
  309.             +	'</div>'
  310.             +	'<div class="divider fl_r">|</div>'
  311.             +	'<div id="LatestTextThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Latest</div>'
  312.             +	'<div class="divider fl_r">|</div>'
  313.             +	'<div id="MostUseTxtThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Most</div>'
  314.             +	'<div class="divider fl_r">|</div>'
  315.             +	'<div id="FavoritTxtThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Favorits</div>'
  316.             +	'<div class="divider fl_r">|</div>'
  317.             +	'<div id="restsTextsThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Resets</div>'
  318.             +	'<div class="divider fl_r">|</div>'
  319.             +	' ';
  320.             
  321.             inputPopupCss = 
  322.                 '#inputPopup {'
  323.             +	'	width: calc(100% - 14px);'
  324.             +	'	background-color:#232430;'
  325.             +	'	position: fixed;'
  326.             +	'	z-index: 1000;'
  327.             +	'	height: 40px;'
  328.             +	'	margin:auto;'
  329.             +	'	top:0px;'
  330.             +	'	}'
  331.             +	'#space {'
  332.             +	'	width: 40px;'
  333.             +	'	}' 
  334.             +	'.ymvy {'
  335.             +	'	float: right;'
  336.             +	'	color: #777777;'
  337.             +	'	cursor: pointer;'
  338.             +	'	padding: 12px 5px 12px;'
  339.             +	'	}'
  340.             +	'#toInputingThis {'
  341.             +	'	margin-top: -4px;'
  342.             +	'	width: calc(100% - (87px * 6) );'
  343.             +	'	}'
  344.             +	'input#txtInputThis {'
  345.             +	'	width: 200px;'
  346.             +	'	padding-left: 3px;'
  347.             +	'	line-height: 15px;'
  348.             +	'	background-color: darkgray;'
  349.             +	'	}'
  350.             +	'#inputPopup .divider.fl_r {'
  351.             +	'	padding: 12px 5px;'
  352.             +	'	opacity: .5;'
  353.             +	'	}';
  354.             
  355.             $( '#inputPopupCss' ).html( inputPopupCss.formatString() );
  356.             
  357.             $('<div id="inputPopup" style="display:none;">' + inputPopup + '</div>').insertBefore('#mv_layer_wrap');
  358.             
  359.             author = $('.mv_author_name a').text();
  360.             thisTitle = $( mainTitleHead ).text() + ( ifReloaded || ( mainTitleHead.search( author ) > -1 ) ? '' : ' - ' + author );
  361.             
  362.             if( ifReloaded )
  363.             {
  364.                 $('#restsTextsThis').attr('data-thisTitle', GM_getValue('VK_title_old') );
  365.                 GM_deleteValue('VK_title_old');
  366.             }
  367.             else
  368.             {
  369.                 $('#restsTextsThis').attr('data-thisTitle', thisTitle);
  370.             }
  371.             
  372.            
  373.             $('#txtInputThis').val( thisTitle );       
  374.         }
  375.         
  376.         function doThis()
  377.         {
  378.             $('#inputPopup').slideToggle( 1000 );
  379.         }   
  380.         
  381.         if( $('#inputPopup').size() < 1 )
  382.         {
  383.             thePopup();
  384.             doThis();
  385.             sizingInput( $( '#txtInputThis' ).val() );
  386.         }
  387.         else
  388.         {
  389.             doThis();
  390.         }
  391.         
  392.         function handlestr( str )
  393.         {
  394.             var strArray = str.split(' ');
  395.         }
  396.         
  397.         $('#CancelsNowThis').off().on('mousedown',function() {
  398.             $('#inputPopup').slideUp( 1000 );
  399.         });
  400.         
  401.         $('#SaveReloadThis').off().on('mousedown',function() {
  402.             
  403.             var NewurlThis,
  404.                 nowTime = $.now(),
  405.                 titleThis = $('#txtInputThis').val(),
  406.                 oldtitleThis = $('#restsTextsThis').attr('data-thisTitle'),
  407.                 urlThis = docLoc;
  408.             
  409.             // Stored so it can be checked and used later after page are reloaded.
  410.             GM_setValue('VK_date', nowTime );
  411.             GM_setValue('VK_title', titleThis );
  412.             GM_setValue('VK_title_old', oldtitleThis );
  413.             
  414.             // Clean up earlier uniqe generated url
  415.             if( urlThis.search('=ffff') > 0 ) 
  416.             {
  417.                 NewurlThis = urlThis.split('=ffff');
  418.                 urlThis = NewurlThis[0].slice(0, -1 );
  419.             }
  420.             
  421.             // Creat new uniqe generated url and store as value, so it can be check when page loads. 
  422.             // This needs to be done so that download button gets the new title
  423.             urlThis = urlThis + '?=ffff' + nowTime;
  424.             GM_setValue('VK_lastUrl', urlThis );
  425.             
  426.             // Reload with that newley created url.
  427.             window.location.href = urlThis;            
  428.         });
  429.         
  430.         $('#justupdateThis').off().on('mousedown',function() {
  431.             var changeTo = $('#txtInputThis').val();
  432.             $( mainTitleHead + ', title').text( changeTo );
  433.         });
  434.         
  435.         $('#restsTextsThis').off().on('mousedown',function() { 
  436.             var changeTo = $('#restsTextsThis').attr('data-thisTitle');
  437.             sizingInput( changeTo );
  438.             $('#txtInputThis').val( changeTo );
  439.             $( mainTitleHead + ', title').text( changeTo );        
  440.         });
  441.         
  442.         $( '#txtInputThis' ).bind("input change paste keyup", function( target ) {
  443.             sizingInput( target.currentTarget.value );    
  444.         });
  445.     }       
  446.     
  447.     $(document).on('click','*',function(e){ this == e.target && l('target',e.target,1); });
  448.     console.log('timeThis', performance.now() - timeThis );
  449.  
  450. }(jQuery));
  451.  
  452.  
  453.  
  454.  
  455.  
  456.  
  457.  
  458.