Layout Design - bigger video and thumbs and Info on precent video and some navigation
/// ==UserScript== // @name vk.com // @namespace http://use.i.E.your.homepage/ // @version 0.25 // @description Layout Design - bigger video and thumbs and Info on precent video and some navigation // @match *vk.com/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js // @require https://greasyfork.org/scripts/386-waituntilexists/code/waitUntilExists.js?version=5026 // @require http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js // @grant GM_getValue // @grant GM_setValue // @grant GM_deleteValue // @created 2014-09-27 // @released 2014-00-00 // @updated 2014-00-00 // @history @version 0.25 - first version: @released - 2015-02-11 // @compatible Greasemonkey, Tampermonkey // @license GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html) // @copyright 2014+, Magnus Fohlström // ==/UserScript== /*global $, jQuery*/ /*jshint -W014, -W030*/ // -W014, laxbreak, Bad line breaking before '+' // -W030, Expected assignment or funtion call insted saw an expression //----------------------------------------------------------------------------------------------------------------------------------------- (function ($) { var timeThis = performance.now(), mainWidth = 1357, lstate = 0; function l( name, fn, showthis ){ if( showthis == 1 || lstate == showthis ) console.log( name, fn !== undefined ? fn : '' ); } String.prototype.formatString = function(){ return this.toString() .split(/\s+/g).join(' ') .split('¤').join('') .split('{').join('{\n\t\t') .split('; ').join(';') .split(';').join(';\n\t\t') .split('*/').join('*/\n') .split('\t\t').join('\t') .split('}').join('}\n'); }; $( '<style id="InsertCssZoom"></style>' + '<style id="InsertCssBasic"></style>' + '<style id="inputPopupCss" ></style>' ).appendTo('head'); function refreshElement( elem , speed ) //refreshElement('.videoPlayer','slow'); { var data = $( elem ).html(); $( elem ).hide().html( data ).fadeIn( speed ); } function playerSize() { var sideWidth = 120, ContWidth = 1500, bodyWidth0 = window.innerWidth - sideWidth, bodyWidth1 = bodyWidth0 > ContWidth ? ContWidth : bodyWidth0, zoomWidth0 = bodyWidth1 / $('#video_player').width(), zoomWidth = zoomWidth0 < 1 ? 1 : zoomWidth0; $( '#InsertCssZoom' ).text( '#video_player { zoom:' + zoomWidth + '; }' ); } function init(input) { var InsertCssBasic, insertReload, newWidth, divider, insertThis; insertReload = // '<div class="divider fl_r">|</div>' + '<div id="NormalizeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Normalize</div>' + '<div id="MaximizeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Maximize</div>' + '<div class="divider fl_r">|</div>' + '<div id="reloadThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Reload</div>' + '<div class="divider fl_r">|</div>' + '<div id="ChangeThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="mv_top_button fl_r">Change Title</div>'; // $( insertReload ).appendTo('#mv_top_controls'); // $( insertReload ).insertAfter('.mv_share_actions.fl_l .fl_r .mv_views_count.fl_r'); insertThis = setInterval(function(){ $('.mv_info_block.fl_l').size() !== 0 && $('#NormalizeThis').size() === 0 && ( $( insertReload ).appendTo('.mv_info_block.fl_l'), clearInterval(insertThis) ); },8); divider = 4; newWidth = input !== undefined ? input : mainWidth; InsertCssBasic = '.mv_cont {' + ' top: 30px !important;' + ' }' + '#mv_box {' + ' background: #232430;' + ' }' + '.mv_top_button {' + ' background: transparent;' + ' color: rgb(119, 119, 119);' + ' margin-top: -4px;' + ' }' + '.video_box_wrap {' + ' width: initial !important;' + ' height: initial !important;' + ' }' + '#mv_min_layer {' + ' width: calc(100% - 250px);' + ' }' + '#mv_min_title {' + ' max-width: 100% !important;' + ' }' + '#mv_title {' + ' width: 100%;' + ' max-width: 100%;' + ' }' + '#mv_min_title:hover, .mv_top_button:hover {' + ' cursor: pointer;' + ' color: rgb(7, 7, 207) !important;' + ' }' + '.fl_r.mv_title_panel {' + ' width: calc(100% - 65px);' + ' }' + '.mv_info_block.fl_l {' + ' width: 100%;' + ' }' + '#page_layout {' + ' width: '+newWidth+'px !important;' + ' }' + '#page_body {' + ' width: calc(100% - 165px) !important;' + ' }' + '.video_compact_view #choose_video_rows .video_row, .video_compact_view #video_rows .video_row, ' + '.video_compact_view #video_search_rows .video_row, .video_compact_view .search_media_rows.video_type .video_row {' + ' height: initial;' + ' margin-bottom: 20px;' + ' width: calc(('+newWidth+'px - 165px) / '+divider+' - 23px);' + ' }' + '.video_compact_view #choose_video_rows .video_row_thumb, .video_compact_view #video_rows .video_row_thumb, ' + '.video_compact_view #video_search_rows .video_row_thumb, .video_compact_view .search_media_rows.video_type .video_row_thumb, ' + '.video_compact_view #choose_video_rows .video_image_div, .video_compact_view .search_media_rows.video_type .video_image_div, ' + '.video_compact_view #video_rows .video_image_div, .video_compact_view #video_search_rows .video_image_div {' + ' width: inherit;' + ' }' + '.video_compact_view #choose_video_rows .video_image_div, .video_compact_view #video_rows .video_image_div, ' + '.video_compact_view #video_search_rows .video_image_div, .video_compact_view .search_media_rows.video_type .video_image_div, ' + '.video_compact_view #choose_video_rows .video_row_thumb, .video_compact_view #video_rows .video_row_thumb, ' + '.video_compact_view #video_search_rows .video_row_thumb, .video_compact_view .search_media_rows.video_type .video_row_thumb {' + ' height: calc((('+newWidth+'px - 165px) / '+divider+' - 23px) * (106/191));' + ' }' + '#search_content .video_row .video_row_info_name a, #video_content .video_row .video_row_info_name a, ' + '#choose_video_content .video_row .video_row_info_name a, #pva_video_tags .video_row .video_row_info_name a {' + ' white-space: normal;' + ' overflow: hidden;' + ' text-overflow: ellipsis;' + ' width: calc(('+newWidth+'px - 165px) / '+divider+' - 23px) !important;' + ' display: -webkit-box;' + ' height: calc( 11px * 1.4 * 3 );' + ' font-size: 11px;' + ' line-height: 1.4;' + ' -webkit-line-clamp: 3;' + ' -webkit-box-orient: vertical;' + ' }'; $( '#InsertCssBasic' ).html( InsertCssBasic.formatString() ); $( '#InsertCssBasic' ).append( '#stl_side { left: '+( $( '#page_layout' ).offset().left )+'px !important; }'.formatString() ); } init(); $( window ).resize(function(){ init(); }); $( '#NormalizeThis' ).waitUntilExists(function(){ function Maximize() { GM_setValue('VK_playerState', 'Maximize' ); playerSize(); $(".mv_top_button:contains('Maximize')").hide(); $(".mv_top_button:contains('Normalize')").show(); } function Normalize() { GM_setValue('VK_playerState', 'Normalize' ); $( '#InsertCssZoom' ).empty(); $(".mv_top_button:contains('Normalize')").hide(); $(".mv_top_button:contains('Maximize')").show(); } GM_getValue('VK_playerState') == 'Maximize' ? Maximize() : Normalize(); $("#NormalizeThis").on('click', Normalize ); $("#MaximizeThis").on('click', Maximize ); $('#reloadThis').on('click', function() { refreshElement('#mv_content .video_box_wrap', 2500 ); }); $('#ChangeThis, #ChangeThis font').on('mouseup', function(e){ this == e.target && e.which == 1 && rewriteTitle(); }); }); function runflashvars() { var flashvars,Seconds_1,Seconds,xformat,time; flashvars = $('embed').attr('flashvars'); flashvars = flashvars !== undefined ? flashvars : ''; Seconds_1 = flashvars.split('&duration='); Seconds = Seconds_1[1] === undefined ? '' : Seconds_1[1].split('&eid1='); Seconds = Seconds[0] === undefined ? 0 : Seconds[0]; xformat = ( Seconds < 3600 ) ? 'mm:ss' : 'H:mm:ss'; time = moment().startOf('day').seconds(Seconds).format(xformat); console.log('sec',Seconds); // Display how long the video clip are if( $('#VideoLength').size() === 0 ) { $('<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'); } // Show a list of Qualities that are playable for this clip window.qualities = ''; 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>'; } if ( flashvars.search('&url720=' ) > 0 ) { stp('720p','HD'); } if ( flashvars.search('&url480=' ) > 0 ) { stp('480p','SD'); } if ( flashvars.search('&url360=' ) > 0 ) { stp('360p','Normal'); } if ( flashvars.search('&url240=' ) > 0 ) { stp('240p','Almost'); } if ( flashvars.search('&url180=' ) > 0 ) { stp('180p','Lowest'); } $( '<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'); } $( '#video_player' ).waitUntilExists(function() { $( '#VideoLength' ).size() === 0 && runflashvars(); }); // Re-sizing inputField function sizingInput( str ) { str = str === undefined ? ' ' : str; var texLen = str.length, parLen = $('#toInputingThis').width() - 6, inputWidth = ( texLen * 5.2 ) + 21; // this makes sure that inputfield dont get bigger than avaible space inputWidth = inputWidth > parLen ? parLen : inputWidth; // check if string is longer than, then the field gets bigger, otherwise it vill stay the same as default. inputWidth = texLen > 34 ? inputWidth : 200; // makes the change as defined $( '#txtInputThis' ).width( inputWidth ); } $( window ).resize(function() { playerSize(); sizingInput( $( '#txtInputThis' ).val() ); }); // this is usefull when same page reloads, with new uniqe URL && only applicable within 10s from clicking reload. var mainTitleHead = '#mv_title', docLoc = window.location.href, lastUrl = GM_getValue('VK_lastUrl') === docLoc, ifReloaded = GM_getValue('VK_title_old') !== undefined && lastUrl; if( lastUrl && $.now() - GM_getValue('VK_date') < 10000 ) { $( '#mv_title' ).waitUntilExists(function(){ var changeTo = GM_getValue('VK_title'); $( '#txtInputThis' ).val( changeTo ); $( mainTitleHead + ', title').text( changeTo ); }); } function rewriteTitle() { function thePopup() { var inputPopup, inputPopupCss, thisTitle, author; inputPopup = '<div id="space"class="ymvy"></div>' + '<div class="divider fl_r">|</div>' + '<div id="CancelsNowThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Cancel</div>' + '<div class="divider fl_r">|</div>' + '<div id="SaveReloadThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Reload</div>' + '<div class="divider fl_r">|</div>' + '<div id="justupdateThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Update</div>' + '<div class="divider fl_r">|</div>' + '<div id="toInputingThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">' + '<input id="txtInputThis" type="text" class="" value=""/>' + '</div>' + '<div class="divider fl_r">|</div>' + '<div id="LatestTextThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Latest</div>' + '<div class="divider fl_r">|</div>' + '<div id="MostUseTxtThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Most</div>' + '<div class="divider fl_r">|</div>' + '<div id="FavoritTxtThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Favorits</div>' + '<div class="divider fl_r">|</div>' + '<div id="restsTextsThis" onmouseover="Videoview.activate(this, 2);" onmouseout="Videoview.deactivate(this, 2);" class="ymvy">Resets</div>' + '<div class="divider fl_r">|</div>' + ' '; inputPopupCss = '#inputPopup {' + ' width: calc(100% - 14px);' + ' background-color:#232430;' + ' position: fixed;' + ' z-index: 1000;' + ' height: 40px;' + ' margin:auto;' + ' top:0px;' + ' }' + '#space {' + ' width: 40px;' + ' }' + '.ymvy {' + ' float: right;' + ' color: #777777;' + ' cursor: pointer;' + ' padding: 12px 5px 12px;' + ' }' + '#toInputingThis {' + ' margin-top: -4px;' + ' width: calc(100% - (87px * 6) );' + ' }' + 'input#txtInputThis {' + ' width: 200px;' + ' padding-left: 3px;' + ' line-height: 15px;' + ' background-color: darkgray;' + ' }' + '#inputPopup .divider.fl_r {' + ' padding: 12px 5px;' + ' opacity: .5;' + ' }'; $( '#inputPopupCss' ).html( inputPopupCss.formatString() ); $('<div id="inputPopup" style="display:none;">' + inputPopup + '</div>').insertBefore('#mv_layer_wrap'); author = $('.mv_author_name a').text(); thisTitle = $( mainTitleHead ).text() + ( ifReloaded || ( mainTitleHead.search( author ) > -1 ) ? '' : ' - ' + author ); if( ifReloaded ) { $('#restsTextsThis').attr('data-thisTitle', GM_getValue('VK_title_old') ); GM_deleteValue('VK_title_old'); } else { $('#restsTextsThis').attr('data-thisTitle', thisTitle); } $('#txtInputThis').val( thisTitle ); } function doThis() { $('#inputPopup').slideToggle( 1000 ); } if( $('#inputPopup').size() < 1 ) { thePopup(); doThis(); sizingInput( $( '#txtInputThis' ).val() ); } else { doThis(); } function handlestr( str ) { var strArray = str.split(' '); } $('#CancelsNowThis').off().on('mousedown',function() { $('#inputPopup').slideUp( 1000 ); }); $('#SaveReloadThis').off().on('mousedown',function() { var NewurlThis, nowTime = $.now(), titleThis = $('#txtInputThis').val(), oldtitleThis = $('#restsTextsThis').attr('data-thisTitle'), urlThis = docLoc; // Stored so it can be checked and used later after page are reloaded. GM_setValue('VK_date', nowTime ); GM_setValue('VK_title', titleThis ); GM_setValue('VK_title_old', oldtitleThis ); // Clean up earlier uniqe generated url if( urlThis.search('=ffff') > 0 ) { NewurlThis = urlThis.split('=ffff'); urlThis = NewurlThis[0].slice(0, -1 ); } // Creat new uniqe generated url and store as value, so it can be check when page loads. // This needs to be done so that download button gets the new title urlThis = urlThis + '?=ffff' + nowTime; GM_setValue('VK_lastUrl', urlThis ); // Reload with that newley created url. window.location.href = urlThis; }); $('#justupdateThis').off().on('mousedown',function() { var changeTo = $('#txtInputThis').val(); $( mainTitleHead + ', title').text( changeTo ); }); $('#restsTextsThis').off().on('mousedown',function() { var changeTo = $('#restsTextsThis').attr('data-thisTitle'); sizingInput( changeTo ); $('#txtInputThis').val( changeTo ); $( mainTitleHead + ', title').text( changeTo ); }); $( '#txtInputThis' ).bind("input change paste keyup", function( target ) { sizingInput( target.currentTarget.value ); }); } $(document).on('click','*',function(e){ this == e.target && l('target',e.target,1); }); console.log('timeThis', performance.now() - timeThis ); }(jQuery));