YTembed.user.js for Pouet's prod page
category: offtopic [glöplog]
Here's the ytEmbed.user.js which replaces the prod's screenshot by a YT embed whenever possible.
I've only used it for a few minutes and I already <3 this.
The code of this user.js ( and the AttentionWhores toggle ) is on the githubs. Feel free to chime in.
I've only used it for a few minutes and I already <3 this.
The code of this user.js ( and the AttentionWhores toggle ) is on the githubs. Feel free to chime in.
Works here in Chrome 21.0.1180.79 + Tampermonkey 2.5.64
although I'm really not sure if I want to use it :)
although I'm really not sure if I want to use it :)
Upload it as a tools/wild prod, I'll thumb it up !
But only if there's a video of it on how to use it!
Nice
video capture pls
I would like a thumbnail of the vidcap as I do a mouse-over plz.
;P
;P
superb
so now i can finally put youtube videos of pooping horses in my comments on BITS demos! :D
This could be taken so much further. A top of the week/month/year video wall, f.e. :)
What would also be really useful, is some glöperator.js that identifies yt links and pouet prod urls in the same user post ("click to add this yt X url to prod page Y") to make adding video links less tedious. Maybe I do something like this, if there's enough interest from other glöpsters. :)
What would also be really useful, is some glöperator.js that identifies yt links and pouet prod urls in the same user post ("click to add this yt X url to prod page Y") to make adding video links less tedious. Maybe I do something like this, if there's enough interest from other glöpsters. :)
Somehow I would like to retain the original screenshot too. Maybe showing the screenshot by default and making the YT embed appear on hover.
ringofyre: ?
tomaes: The video wall sound cool. ... It must be possible to generate a playlist too. Maybe I should see that with the Pound-off guys.
From the couple of times I checked the gloperator pages back when I had admin access, I can imagine a gloperator.user.js could be nice. Nothing prevents you from trying to write such helper scripts for userself, and suggest them to the gloperators. I'm sure you've got the JS skills to do that.
ringofyre: ?
tomaes: The video wall sound cool. ... It must be possible to generate a playlist too. Maybe I should see that with the Pound-off guys.
From the couple of times I checked the gloperator pages back when I had admin access, I can imagine a gloperator.user.js could be nice. Nothing prevents you from trying to write such helper scripts for userself, and suggest them to the gloperators. I'm sure you've got the JS skills to do that.
poi: I'm working on some unrelated HTML5/JS stuff with number crunching and Web Workers, but I have no experience in doing browser AddOns so far, maybe time to learn something new yet again. ;)
Quote:
Maybe showing the screenshot by default and making the YT embed appear on hover.
how about good old mouse click?
Code:
// ==UserScript==
// @name Pouet 'YT embed' | v0.02
// @description replace the screenshot of the prods on Pouet.net by the embedded YT capture if possible
// @include http://pouet.net/prod.php*
// @include http://*.pouet.net/prod.php*
// ==/UserScript==
/* (c) August 2012 by Mathieu 'P01' HENRI ( http://www.p01.org ). Updated by Kabuto to use original screenshot as placeholder with play button in front. */
!(function()
{ // replace screenshot by embeded YT capture if possible
var screenshot = document.querySelector('img[src^="screenshots/"][title^="screenshot added on the "]');
var yt = screenshot && document.querySelector('#mainDownload ~ a[href*="v="][href*="youtu"]');
if( yt )
{
GM_addStyle(".yt-play {display:inline;cursor:pointer;} .yt-play > div {position:relative;height:0;width:89px;} .yt-play > div > div {position:absolute;left:0;top:" + (-31-screenshot.offsetHeight/2) + "px;width:89px;height:62px;border-radius:8px;color:white;font-size:40px;box-shadow:0 0 8px white;background:black;} .yt-play:hover > div > div {background:#C00;}");
screenshot.parentNode.innerHTML = '<div class="yt-play"><div><div>▸</div></div></div>';
var d2 = document.querySelector('.yt-play');
d2.insertBefore(screenshot,d2.firstChild);
var f = function(){
var i=document.createElement('iframe');
var code = (yt.href.match(/(v=|youtu\.be\/)([^&\?]+)/)||['']).pop();
i.width=400;
i.height=300;
i.frameBorder=0;
i.allowfullscreen=1;
i.src = 'http://www.youtube.com/embed/'+code+'?autoplay=1';
d2.parentNode.appendChild(i);
d2.parentNode.removeChild(d2);
};
d2.addEventListener("click",f,false);
}
})();
Damn, code got destroyed :-( Pastebin link: http://pastebin.com/raw.php?i=VdSBDCQ4.
i remember i made a greasemonkey script long time ago that inserted a thumbnail of the screenshot of every prod in "prods" page. very useful when you are looking for a demo but dont know the name (but not very server bandwidth efficient)
big thumb :D
Hi. I rewrote my original script (last one was lost since long time). Here it is.
Basically it adds a thumbnail for every prod in "prod list" page.
Tested successfully on chrome and firefox. With this and YT embed one, it its almost pouet 2.0 at your fingertips. Enjoy.
Basically it adds a thumbnail for every prod in "prod list" page.
Tested successfully on chrome and firefox. With this and YT embed one, it its almost pouet 2.0 at your fingertips. Enjoy.
Tigrou: Cool! Could you send a pull request or similar with that user.js. If not, do you mind if I add that user.js to my list on github ( keeping the copyright notice & co of course )
Also that script rocks twice as much with:
Also that script rocks twice as much with:
Code:
I would add the 'jpeg' extension for good measure. Alas we can't do much about uppercased and cowboy cased extensions :\// @include http://www.pouet.net/prodlist.php*
// @include http://www.pouet.net/search.php*
// @include http://pouet.net/prodlist.php*
// @include http://pouet.net/search.php*This feature could be nice on the groups.php page as well.
Will try to improve that script to make this a bit more flexible e.g. starting from document.querySelectorAll('a[href*="prod.php?which="]') and discarding the adjacent duplicates.
Will try to improve that script to make this a bit more flexible e.g. starting from document.querySelectorAll('a[href*="prod.php?which="]') and discarding the adjacent duplicates.
@p01 feel free to include it on github and to modify the script if needed.
if you publish it, could you add my email address near the signature ? eg : something like "2012.08.24 Tigrou (tigrou.ind at gmail.com)"
I dont think adding the jpeg extension is needed, since all 57000 pouet screenshots are png, jpg or gif only.
if you publish it, could you add my email address near the signature ? eg : something like "2012.08.24 Tigrou (tigrou.ind at gmail.com)"
I dont think adding the jpeg extension is needed, since all 57000 pouet screenshots are png, jpg or gif only.
I had a quick look and the images are served with an ETAG which makes the servers quite robust. Check this gist to see what I've got so far.
after adding opacity:0.25 to Kabuto's script so you actually get to see most of the screenshot as well prior to wanting to watch it as a video, it's really a nice feature now. thanks :)
also, minor but handy tweak: if you remove '#maindownload ~' from the script as well, it'll just take the latest mentioned youtube url from the comments as well. just in case it isnt yet added by gloperators in the download section at the top yet.