Develop Reference

How to get video's metadata (length) before uploading?

First thing first, I am trying to extract the video duration from the file and then display it without having to actually upload the file.
When a user selected a video - the information will be displayed below it includes file name, file size, file type. However much to my terrible skills - I cannot get the duration to display. I tried some code snippets i found from other sites as well as here but none of them seems to work. Just trying to find a simple code that would do the task.
I tried onloadedmetadata but I don't think that would even work.
Please note : I'm still learning javascript.
I also tried some sites tutorial & some code snippet I found via stackoverflow
function uploadFunction(){
//Variables
var cVideo = document.getElementById("fileUp");
var txtInfo = "";
//function
if ('files' in cVideo){
if(cVideo.files.length == 0){
txtInfo = "Please select a video";
} else {
for (var v = 0; v < cVideo.files.length; v++){
txtInfo += "<br><strong>#" + (v+1) + " File Information:</strong> <br>";
var infoFile = cVideo.files[v];
if('name' in infoFile){
txtInfo += "File name: " +infoFile.name +"<br>";
}
if('size' in infoFile){
txtInfo += "File size: " +infoFile.size +" Bytes <br>";
}
if('type' in infoFile){
txtInfo += "File Type: "+infoFile.type +" <br>";
}
if('duration' in infoFile){
txtInfo += "Duration : "+infoFile.duration +"<br>";
}
}
}
}
document.getElementById("information").innerHTML = txtInfo ;
}
HTML
<input type="file" id="fileUp" name="fileUpload" multiple size="50" onchange="uploadFunction()">
<p id="information"></p>
Can't get the duration to appear at all.

It's actually reasonably simple, but since this requires turning the file into a blob and then checking its duration with a video element, uploading a video longer than a couple of minutes will take a lot of processing and slow down your page immensly. I have added a filesize restriction (which is a reasonable start in my opinion). Here's a snippet (which will not work on Stack Overflow due to sandbox restrictions, but I did test it on a local server). I obviously also don't check MIME types or whether its a video at all, although loadedmetadata will not trigger if you upload anything that is not a video.
const fileInput = document.querySelector( 'input[type=file]' );
const fileDuration = document.getElementById( 'file-duration' )
// Listen for any change to the value of the file input
fileInput.addEventListener( 'change', event => {
fileDuration.textContent = 'Fetching video duration...';
// When the file selected by the user changes:
// - create a fresh <video> element that has not yet fired any events
// - create a file reader to safely retrieve and manipulate the file
const file = event.target.files[0];
const video = document.createElement( 'video' );
const reader = new FileReader();
// Cancel if the initial filesize just seems too large.
// If the maximum allowed is 30 seconds, then a Gigabyte of file seems too much.
if( file.size > 10000000 ){
fileDuration.textContent = `File is too large (${file.size}). Refused to read duration.`;
return;
}
// Before setting any source to the <video> element,
// add a listener for `loadedmetadata` - the event that fires
// when metadata such as duration is available.
// As well as an error event is case something goes wrong.
video.addEventListener( 'loadedmetadata', event => {
// When the metadata is loaded, duration can be read.
fileDuration.textContent = `Video is ${video.duration} seconds long.`;
});
video.addEventListener( 'error', event => {
// If the file isn't a video or something went wrong, print out an error message.
fileDuration.textContent = `Could not get duration of video, an error has occurred.`;
});
// Before reading any file, attach an event listener for
// when the file is fully read by the reader.
// After that we can use this read result as a source for the <video>
reader.addEventListener( 'loadend', function(){
// reader.result now contains a `blob:` url. This seems like a
// nonsensical collection of characters, but the <video> element
// should be able to play it.
video.src = reader.result;
// After we assigned it to the `src` of the <video>, it will be
// act like any other video source, and will trigger the related
// events such as `loadedmetadata`, `canplay`, etc...
});
// Instruct the reader to read the file as a url. When its done
// it will trigger the `loadend` event handler above.
reader.readAsDataURL( file );
});
<input type="file" />
<p id="file-duration">No video file</p>

Multiple HTML5 desktop notifications not displaying

In Chrome, things work OK (multiple notifications display at the same time). But in Firefox when there are multiple notifications NONE get displayed. Please see fiddle for a demo:
http://jsfiddle.net/e6ps2/3/
Scenario: I have a loop that reads through an array of things to be displayed as notifications.
I started off using Notify.js a nice javascript wrapper to the notifications api. And I thought the problem may be related to that. Then I tried using the api directly and the problem persisted.
So I would like to layer the notifications on top of each other if possible (which is how it should happen - and does happen in Chrome). But a possible fallback is to queue the notifications and using notify.js notifyClose() callback function to open the next notification in the queue - but have no idea how to do this.
if (Notify.isSupported()) {
//Notify wrapper Notifications
if (Notify.needsPermission()) Notify.requestPermission();
//var j = 1; //uncomment this for single notification
var j = 2;
for (var i=0;i<j;i++) {
var my_notification = new Notify('Hello World ' + i, {
body: 'Some message here ' + i,
tag: "notify_" + i
});
//uncomment below to show the notify plugin html5 notifications and then comment out the bare bones one
//my_notification.show();
//HTML5 bare nones Notifications
var notification = new Notification("Hi there! " + i, {
body: 'Some message here ' + i,
tag: "Hello_"+ i
});
}
} else {alert("not supported"); }
Hope this all makes sense.
Thanks

For first issue... If permission hasn't been given, you need to give a callback to fire when requesting permission. Moving the send code into a function, allow it to be called standalone, or as the callback
if (Notify.needsPermission()) {
Notify.requestPermission(queueNotifications);
} else {
queueNotifications();
}
Regarding the queueing... I've had a similar issue and Firefox's implementation is poor compared to Chromes. Nevertheless, notifications can be queued using the following method:
create timeinterval variable
using the Notification onshow event, set a timeout with the interval to hide the notification
move the sending of the notification into a separate function that can be called by a timeout inside of the for loop
if (Notify.isSupported()) {
var
showTimeout,
displayTime = 5000,
queueNotifications = function(){
var i,
j = 3;
for (i=0;i<j;i++) {
setTimeout(sendNotifications, displayTime*i, i);
}
},
sendNotifications = function(i){
var
hideTimeout,
onShow = function(){
var $this = this;
hideTimeout = setTimeout(function(){
$this.close();
}, displayTime);
},
my_notification = new Notify('Hello World ' + i, {
body: 'Some message here ' + i,
tag: "notify_" + i
});
my_notification.onShowNotification = onShow;
my_notification.show();
}
if (Notify.needsPermission()) {
Notify.requestPermission(queueNotifications);
} else {
queueNotifications();
}
I've updated your jsfiddle with the working version.
http://jsfiddle.net/e6ps2/5/
Cheers,
Dan

If you set the option 'requireInteraction: true' it will stack your notifications for you, they will not disappear automatically as default but you can use the following to hide them.
setTimeout(notification.close.bind(notification), 5000);

how to add an auto expand to ace editor

im using the ace editor and im unable to modify it to autoexpand when the user input is longer than the current size:
here is how i have it currently (it has a handler for shift+enter), and it does not work.
Typist.prototype.heightUpdateFunction = function() {
var newHeight =
ac.getSession().getScreenLength()
* ac.renderer.lineHeight
+ ac.renderer.scrollBar.getWidth();
$(settings.id).height(newHeight.toString() + "px");
ac.resize();
};
Typist.prototype.createinput = function(settings,handler) {
var that = this;
var $typepad = $("<div/>" ,{
id : settings.id,
}).css({position:'relative', height: '40px'}) ;
$(that.place).append($typepad);
var ac = ace.edit(settings.id);
ac.commands.addCommand({
name : 'catchKeys',
bindKey : { win : 'Shift-Enter', mac : 'Shift-Enter' },
exec : function (ac) {
if (typeof handler === "function") {
handler(ac);
}
},
readOnly : false
});
that.heightUpdateFunction();
ac.getSession().on('change', that.heightUpdateFunction);
return true;
};
how would i get it to work? this current code does not.
How would i access the object that called the height update? (or the "id" of the div containing the ace editor, since i have several, each with an id reachable by
a.inpid
given
a = new Typist()
my attempt comes from reading this similar kind of problem i dont want to go that way because i will have several ace editors on the page, and i need to know the id of the one to apply the height adjustment to.

turns out i missed something simple
Typist.prototype.heightUpdateFunction = function() {
var newHeight =
ac.getSession().getScreenLength()
* ac.renderer.lineHeight
+ ac.renderer.scrollBar.getWidth();
$("#"+settings.id).height(newHeight.toString() + "px"); // i forgot $() needs '#'
ac.resize();
};
my bad. This omission kept me awake for hours.
EDIT:
see comment in the code to find my correction

Chrome Extension doesn't considers optionvalue until reloaded

I'm working on my first Chrome Extension. After learning some interesting notions about jquery i've moved to raw javascript code thanks to "Rob W".
Actually the extension do an XMLHttpRequest to a remote page with some parameters and, after manipulating the result, render an html list into the popup window.
Now everything is up and running so i'm moving to add some option.
The first one was "how many elements you want to load" to set a limit to the element of the list.
I'm using fancy-setting to manage my options and here's the problem.
The extension act like there's a "cache" about the local storage settings.
If i do not set anything and perform a clean installation of the extension, the default number of element is loaded correctly.
If i change the value. I need to reload the extension to see the change.
Only if a remove the setting i see the extension work as intended immediately.
Now, i'm going a little more into specific information.
This is the popup.js script:
chrome.extension.sendRequest({action: 'gpmeGetOptions'}, function(theOptions) {
//Load the limit for topic shown
console.log('NGI-LH -> Received NGI "max_topic_shown" setting ('+theOptions.max_topic_shown+')');
//Initializing the async connection
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://gaming.ngi.it/subscription.php?do=viewsubscription&pp='+theOptions.max_topic_shown+'&folderid=all&sort=lastpost&order=desc');
xhr.onload = function() {
var html = "<ul>";
var doc = xhr.response;
var TDs = doc.querySelectorAll('td[id*="td_threadtitle_"]');
[].forEach.call(TDs, function(td) {
//Removes useless elements from the source
var tag = td.querySelector('img[src="images/misc/tag.png"]'); (tag != null) ? tag.parentNode.removeChild(tag) : false;
var div_small_font = td.querySelector('div[class="smallfont"]'); (small_font != null ) ? small_font.parentNode.removeChild(small_font) : false;
var span_small_font = td.querySelector('span[class="smallfont"]'); (small_font != null ) ? small_font.parentNode.removeChild(small_font) : false;
var span = td.querySelector('span'); (span != null ) ? span.parentNode.removeChild(span) : false;
//Change the look of some elements
var firstnew = td.querySelector('img[src="images/buttons/firstnew.gif"]'); (firstnew != null ) ? firstnew.src = "/img/icons/comment.gif" : false;
var boldtext = td.querySelector('a[style="font-weight:bold"]'); (boldtext != null ) ? boldtext.style.fontWeight = "normal" : false;
//Modify the lenght of the strings
var lenght_str = td.querySelector('a[id^="thread_title_"]');
if (lenght_str.textContent.length > 40) {
lenght_str.textContent = lenght_str.textContent.substring(0, 40);
lenght_str.innerHTML += "<span style='font-size: 6pt'> [...]</span>";
}
//Removes "Poll:" and Tabulation from the strings
td.querySelector('div').innerHTML = td.querySelector('div').innerHTML.replace(/(Poll)+(:)/g, '');
//Modify the URL from relative to absolute and add the target="_newtab" for the ICON
(td.querySelector('a[id^="thread_title"]') != null) ? td.querySelector('a[id^="thread_title"]').href += "&goto=newpost" : false;
(td.querySelector('a[id^="thread_goto"]') != null) ? td.querySelector('a[id^="thread_goto"]').href += "&goto=newpost": false;
(td.querySelector('a[id^="thread_title"]') != null) ? td.querySelector('a[id^="thread_title"]').target = "_newtab": false;
(td.querySelector('a[id^="thread_goto"]') != null) ? td.querySelector('a[id^="thread_goto"]').target = "_newtab": false;
//Store the td into the main 'html' variable
html += "<li>"+td.innerHTML+"</li>";
// console.log(td);
});
html += "</ul>";
//Send the html variable to the popup window
document.getElementById("content").innerHTML = html.toString();
};
xhr.responseType = 'document'; // Chrome 18+
xhr.send();
});
Following the background.js (the html just load /fancy-settings/source/lib/store.js and this script as Fancy-Setting How-To explains)
//Initialization fancy-settings
var settings = new Store("settings", {
"old_logo": false,
"max_topic_shown": "10"
});
//Load settings
var settings = settings.toObject();
//Listener who send back the settings
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == 'gpmeGetOptions') {
sendResponse(settings);
}
});
The console.log show the value as it has been cached, as i said.
If i set the value to "20", It remain default until i reload the extension.
If i change it to 30, it remain at 20 until i reload the extension.
If something more is needed, just ask. I'll edit the question.

The problem appears to be a conceptual misunderstanding. The background.js script in a Chrome Extension is loaded once and continues to run until either the extension or the Chrome Browser is restarted.
This means in your current code the settings variable value is loaded only when the extension first starts. In order to access values that have been updated since the extension is loaded the settings variable value in background.js must be reloaded.
There are a number of ways to accomplish this. The simplest is to move the settings related code into the chrome.extension.onRequest.addListener callback function in background.js. This is also the most inefficient solution, as settings are reloaded every request whether they have actually been updated or not.
A better solution would be to reload the settings value in background.js only when the values are updated in the options page. This uses the persistence, or caching, of the settings variable to your advantage. You'll have to check the documentation for implementation details, but the idea would be to send a message from the options page to the background.js page, telling it to update settings after the new settings have been stored.
As an unrelated aside, the var keyword in the line var settings = settings.toObject(); is not needed. There is no need to redeclare the variable, it is already declared above.

Disappearing Menu Commands After User Input in Tampermonkey

Tampermonkey is an extension for Google Chrome that attempts to emulate the functionality of Greasemonkey. To be clear, I got my script to work in Chrome and the default JavaScript changes to show up. I wanted to test the menu commands, however, and entered a 6-digit hex color code after clicking on the command in the Tampermonkey menu. I reloaded the page, and the commands disappeared from the menu! My script was still there (and the checkbox was ticked).
No matter what I did or what code I changed, I could never emulate this initial functionality after that user-defined input was set. This leads me to believe that there's some persistent data that I can't delete that's causing my script to fail prematurely. NOTE: This exact script works perfectly and without errors in Firefox.
This is obviously not a Tampermonkey forum, but people here seem very knowledgeable about cross-platform compatility. I didn't hear a single peep from the Chrome console after all of the changes below, and I'm really just out of ideas at this point. Here are some things I've tried (with no success). Any console errors are listed:
Changing jQuery version from 1.5.1 to 1.3.2
Calling localStorage.getItem('prevoColor') from console after page load (both values null)
Changing client-side storage from localStorage to get/setValue
Calling GM_getValue from the console = ReferenceError: GM_getValue is not defined
Deleting localStorage entries for veekun.com in Chrome options
Refreshing, Re-installing the script, and restarting the browser more times than I can count
Repeating all of the above commands using Firebug Lite (bookmarklet)
Here's the code I was using:
// ==UserScript==
// #name Veekun Comparison Highlighter
// #namespace tag://veekun
// #description Highlights moves exclusive to pre-evolutions on veekun.com's family comparison pages (user-defined colors available)
// #include http://veekun.com/dex/gadgets/*
// #author Matthew Ammann
// #version 1.0.3
// #date 3/11/11
// #require http://sizzlemctwizzle.com/updater.php?id=98824
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
/*
Goal: Change checkmark color & move name to user-specified color on family comparison pages if
[DONE] Baby poke has a LEVEL-UP move unlearned by any evolutions
[DONE] a) Make sure move is not a TM or tutor move
[DONE] Any other mid-evolution has a move unlearnable by a final evo (Caterpie, Weedle families)
[DONE] a) Make sure move is not a TM or tutor move
[DONE] Any pre-evo has a TUTOR move unlearned by any evo (Murkrow in HG/SS)
[] Implement auto-update after uploading to userscripts.org
Credits: Brock Adams, for helping with Chrome compatibility
Metalkid, for the jQuery consult
*/
var isLevelupMove = false;
var isTutorMove = false;
var isTM = false;
var TMhead = $('#moves\\:machine');
var hasSecondEvo = false;
var hasFinalEvo1 = false;
var hasFinalEvo2 = false;
var header = $('.header-row').eq(1);
var TMmoves = new Array();
//This section deals with the user-defined colors
GM_registerMenuCommand("Color for pre-evolutionary-only moves", prevoColorPrompt)
GM_registerMenuCommand("Color for first evolution-only moves", evoColorPrompt)
var prevoColor = GM_getValue('prevoColor', '#FF0000');
var evoColor = GM_getValue('evoColor', '#339900');
function prevoColorPrompt()
{
var input = prompt("Please enter a desired 6-digit hex color-code for pre-evolutionary pokemon:")
GM_setValue('prevoColor', '#'+input);
}
function evoColorPrompt()
{
var input = prompt("Please enter the desired 6-digit hex color-code for first-evolution pokemon:")
GM_setValue('evoColor', '#'+input);
}
//This loop tests each 'th' element in a sample header row, determining how many Evos are currently present in the chart.
$('.header-row').eq(1).find('th').each(function(index)
{
if($(this).find('a').length != 0)
{
switch(index)
{
case 2:
hasSecondEvo = true;
break;
case 3:
hasFinalEvo1 = true;
break;
case 4:
hasFinalEvo2 = true;
break;
}
}
});
//All 'tr' siblings are TM moves, since it's the last section on the page
//This array puts only the names of the available TMs into the TMmoves array
TMhead.nextAll().each(function(index)
{
TMmoves.push($(this).children(":first").find('a').eq(0).html());
});
$('tr').each(function(index)
{
var moveName = $(this).children(":first").find('a').eq(0).html();
moveName = $.trim(moveName);
switch($(this).attr('id'))
{
case 'moves:level-up':
isLevelupMove = true;
break;
case 'moves:egg':
isLevelupMove = false;
break;
case 'moves:tutor':
isTutorMove = true;
case 'moves:machine':
isTM = true;
}
if(isLevelupMove || isTutorMove)
{
var babyMoveCell = $(this).find('td').eq(0);
babyMoveText = $.trim(babyMoveCell.html());
secondEvoCell = babyMoveCell.next();
secondEvoText = $.trim(secondEvoCell.html());
finalEvo1Cell = secondEvoCell.next();
finalEvo1Text = $.trim(finalEvo1Cell.html());
finalEvo2Cell = finalEvo1Cell.next();
finalEvo2Text = $.trim(finalEvo2Cell.html());
//This checks if evolutions have checkmarks
if(babyMoveText.length > 0)
{
if(hasSecondEvo && secondEvoText.length == 0 || hasFinalEvo1 && finalEvo1Text.length == 0 ||
hasFinalEvo2 && finalEvo2Text.length == 0)
{
//See if the move is a TM before proceeding
var tm = tmCheck(moveName);
if(!tm)
{
if(secondEvoText.length > 0)
{
babyMoveCell.css("color", evoColor);
secondEvoCell.css("color", evoColor);
babyMoveCell.prev().find('a').eq(0).css("color", evoColor); //highlights move name
}
else
{
babyMoveCell.css("color", prevoColor);
babyMoveCell.prev().find('a').eq(0).css("color", prevoColor);
}
}
}
}
else if(secondEvoText.length > 0)
{
if(hasFinalEvo1 && finalEvo1Text.length == 0 || hasFinalEvo2 && finalEvo2Text.length == 0)
{
var tm = tmCheck(moveName);
if(!tm)
{
secondEvoCell.css("color", evoColor);
babyMoveCell.prev().find('a').eq(0).css("color", evoColor);
}
}
}
}
});
function tmCheck(input)
{
var isTM = false;
//Iterate through TMmoves array to see if the input matches any entries
for(var i = 0; i < TMmoves.length; i++)
{
if(input == TMmoves[i])
{
isTM = true;
break;
}
}
if(isTM == true)
return true;
else
return false;
}
//alert("evoColor: " + localStorage.getItem('evoColor') + ". prevoColor: " + localStorage.getItem('prevoColor'));
Any ideas as to why this is happening?
EDIT: I messaged sizzlemctwizzle about this problem, and this was his reply: "Tampermonkey’s #require implementation is incorrect. It downloads my updater far too often so I have banned it from using my updater via browser sniffing. My server just can’t handle the traffic it brings. The script it is downloading from my server shouldn’t have any actual code in it. Since it is causing errors with in your script I would guess Tampermonkey isn’t passing the User Agent header when it does these requests. I’m never tested my updater in Chrome so I have no idea why it breaks. Perhaps you could try and install NinjaKit instead."

What URL are you testing this on? I tested on http://veekun.com/dex/gadgets/stat_calculator.
Anyway, the script behavior, vis à vis the menu commands did seem erratic with Tampermonkey. I couldn't really tell / didn't really check if the rest of the script was working as it should.
The culprit seems to be the sizzlemctwizzle.com update check. Removing its // #require made the menu stable. Putting that directive back, broke the script again.
I've never been a fan of that update checker, so I'm not going to dive into why it appears to be breaking the Tampermonkey instance of this script. (That would be another question -- and one probably best directed at the 2 responsible developers.)
For now, suggest you just delete it. Your users will check for updates as needed :) .