Layout Design - bigger video and thumbs and Info on precent video and some navigation
As of
/// ==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://greatest.deepsurf.us/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));