Develop Reference

show next/previous items of an array

I am using next/previous buttons to show the corresponding items of an array. I am experiencing two issues...
1) when the page loads, I need to click previous or next two times before anything will happen
2) Let's say I'm at record ID 10 for example. If I press 'next' 5 times to get to record ID 15, then press 'previous', instead of taking me to 14, it will take me to ID 16. If I then hit previous again (and subsequent times), the ID will then decrease as normal. Same thing with previous: If I start at ID 15 and hit previous down to 10, clicking 'next' will take me to ID 9 instead of 11. Then, subsequent clicks of 'next' will increase the ID as normal.
Hopefully this will help explain what I mean...
https://jsfiddle.net/mjcs351L/
This uses a super hero API. You will need your own to test the code but it's free and doesn't even ask you to sign up: https://www.superheroapi.com/
Thanks in advance for any guidance.
var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + charID;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
getinfo();
function getinfo() {
document.getElementById('fullname').innerHTML = result.biography["full-name"];
document.getElementById('name').innerHTML = result.name;
document.getElementById('egos').innerHTML = result.biography["alter-egos"];
document.getElementById('charID').innerHTML = result.id;
document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
document.getElementById('height').innerHTML = result.appearance.height;
document.getElementById('weight').innerHTML = result.appearance.weight;
document.getElementById('gender').innerHTML = result.appearance.gender;
document.getElementById('race').innerHTML = result.appearance.race;
document.getElementById('eye').innerHTML = result.appearance["eye-color"];
document.getElementById('hair').innerHTML = result.appearance["hair-color"];
document.getElementById('occupation').innerHTML = result.work.occupation;
document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
document.getElementById('relatives').innerHTML = result.connections.relatives;
document.getElementById("pic").src = result.image.url;
document.getElementById("pic").style.height = 300;
document.getElementById("pic").style.width = 300;
}
function nextItem() {
var test = charID + 1;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
charID = test;
getinfo();
});
req.send(null);
}
function prevItem() {
var test = charID - 1;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
charID = test;
getinfo();
});
req.send(null);
}
document.getElementById('prev_button').addEventListener('click', function(e) {
prevItem();
});
document.getElementById('next_button').addEventListener('click', function(e) {
nextItem();
});
event.preventDefault();
});
req.send(null);

You should try and follow DRY (don't repeat yourself), it makes it easier to debug code. I've tweaked the code a bit to re-use components.
var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
function fetchData(id) {
id = id || charID;
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + id;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');
req.addEventListener('load', function() {
var result = JSON.parse(req.responseText);
getinfo(result);
});
req.send(null);
}
fetchData()
function getinfo(result) {
document.getElementById('fullname').innerHTML = result.biography["full-name"];
document.getElementById('name').innerHTML = result.name;
document.getElementById('egos').innerHTML = result.biography["alter-egos"];
document.getElementById('charID').innerHTML = result.id;
document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
document.getElementById('height').innerHTML = result.appearance.height;
document.getElementById('weight').innerHTML = result.appearance.weight;
document.getElementById('gender').innerHTML = result.appearance.gender;
document.getElementById('race').innerHTML = result.appearance.race;
document.getElementById('eye').innerHTML = result.appearance["eye-color"];
document.getElementById('hair').innerHTML = result.appearance["hair-color"];
document.getElementById('occupation').innerHTML = result.work.occupation;
document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
document.getElementById('relatives').innerHTML = result.connections.relatives;
document.getElementById("pic").src = result.image.url;
document.getElementById("pic").style.height = 300;
document.getElementById("pic").style.width = 300;
}
function nextItem(ev) {
ev.preventDefault();
fetchData(++charID)
}
function prevItem(ev) {
ev.preventDefault();
fetchData(--charID)
}
document.getElementById('prev_button').addEventListener('click', prevItem);
document.getElementById('next_button').addEventListener('click', nextItem);

ajax listener for file uploading progress

I cant find a way to get around my code. I have seen some tutorials out there, but because of the way I design my code I guess I need something different.
(function(){
var dropzone = document.getElementById('dropzone');
var uploadFile = function (files) {
var formData = new FormData();
var request = new XMLHttpRequest();
var i;
var file_size = 0;
for(i = 0; i<files.length; i = i+1){
formData.append('file[]', files[i]);
file_size = file_size + files[i].size;
}
request.onload = function(){
var data = this.responseText;
// window.location.reload();
};
request.open('post', 'dragNdrop.php?isNotSet=set');
request.send(formData);
};
dropzone.ondragover = function(){
this.className = 'dropzone dragover';
return false;
};
dropzone.ondragleave = function(){
this.className = 'dropzone';
return false;
};
dropzone.ondrop = function (event) {
event.preventDefault();
this.className = 'dropzone';
uploadFile(event.dataTransfer.files);
return false;
}
}());
This is the code I use to upload a file, but i cant find a way to add a eventlistener that keeps checking if the file has been uploaded. I have tried.
request.upload = function(){console.log("me")} //Returns nothing
I tried something like this:
request.upload.addEventListener("progress", progressBar, false);
function progressBar(event){
var percent = (event.loaded / event.total) * 100;
console.log(percent + " " + event.loaded + " " + event.total);
}
It only returns the value once, I would imagine it needs to return several times as it needs to loop in order to get the progress bar moving?
All this function below was inside the main function.
How else could I do this?

Sending two files in a queue

Hey I have a problem with sending two files in a queque. I don't have any idea how to do that when I select 2 files, 2 were uploaded at once, and the next 2 were waiting in queue. Now when I select 4 files, 2 are sent and the next two will not send. Please look in my code. Maybe you have an idea. What I must to do that make it work in function induction ?
(function() {
var imageType = /image.*/;
function uploadFile(file, percent_info, p_bar, licznik) {
var url = "server/index.php";
if (file[licznik].type.match(imageType)) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
if (percentLoaded < 100) {
percent_info[licznik].style.width = percentLoaded + "%";
}
}
});
xhr.upload.addEventListener("load", function(e) {
var percentLoaded = Math.round((e.loaded / e.total) * 100);
percent_info[licznik].style.width = percentLoaded + "%";
});
function ready() {
return function() {
if (xhr.readyState == 4 && xhr.status == 200) {
p_bar[licznik].classList.add('trans_completed');
if (licznik < file.length){
licznik++;
}
}
};
}
xhr.onreadystatechange = ready();
xhr.open("POST", url, true);
fd.append('uploaded_file', file[licznik]);
xhr.send(fd);
}
};
var uploadfiles = document.querySelector('#file-upload');
uploadfiles.addEventListener('change', function() {
var files = this.files;
var percent_info = document.querySelectorAll('.progress_bar:not(.trans_completed) .percent');
var p_bar = document.querySelectorAll('.progress_bar:not(.trans_completed)');
/* --- Upload files to server loop --- */
(function induction(files, percent_info, p_bar) {
counter_file = 0;
counter_file_2 = 1;
function caller() {
uploadFile(files, percent_info, p_bar, counter_file);
uploadFile(files, percent_info, p_bar, counter_file_2);
}
caller();
})(files, percent_info, p_bar);
});
})();

Blob data is not being sent to the PHP through XHR

I am trying to chunk a file and send to the server as follows
var fileselect = document.getElementById("file");
fileselect.addEventListener("change", FileSelectHandler, false);
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
}
function FileSelectHandler(e) {
FileDragHover(e);
var blob = e.target.files[0] || e.dataTransfer.files[0];
worker = new Worker("fileupload.js");
worker.postMessage(blob);
worker.onmessage = function(e) {
console.log(e);
};
}
fileupload.js
self.onmessage = function(e) {
const BYTES_PER_CHUNK = 1024 * 1024 * 32;
var blob = new Blob([e.data]),
start = 0,
index = 0,
slices = Math.ceil(blob.size / BYTES_PER_CHUNK),
slices2 = slices;
while (start < blob.size) {
end = start + BYTES_PER_CHUNK;
if (end > blob.size) end = blob.size;
uploadChunk(blob, index, start, end, slices, slices2);
start = end;
index++;
}
};
function uploadChunk(blob, index, start, end, slices, slices2) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
slices--;
if (slices == 0) {
var xhrMerge = new XMLHttpRequest();
xhrMerge.open("POST", "uploadlargefile/?a=merge&name=" + blob.name + "&slices=" + slices2);
xhrMerge.onload = function() {
self.close();
};
xhrMerge.send();
}
};
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) self.postMessage(Math.round(100 / e.total * e.loaded)); //this doesn't work o.O
};
var chunk = blob.slice(start, end);
xhr.open("POST", "uploadlargefile/?a=chunk&name=" + blob.name + "&index=" + index);
xhr.setRequestHeader("Content-Type", "multipart\/form-data; boundary=--------------------");
xhr.send(chunk);
}
PHP
print_r($_GET['name']); print_r($_FILES);die;
I am able to get the name of the file but not the file . Any suggestion what could be wrong

have been trying to create an mpeg dash player using but video is not responding

please check this code out and help me see what am doing wrong the file wont play in video. the segments are first appended to an array and then appended to the source buffer when the sourcebuffer updateend is called
$(function() {
var video = function () {
this.segmentArray = [];
this.version = "PressPause 1.0.0",
this.videoPlayer = document.querySelectorAll("video")[0];
this.source = new MediaSource();
this.segmentCheck = 0;
this.lastTime = 0;
this.duration = 0;
this.bandwidth = 0;
this.duration = "";
this.InitializationSegment = null;
this.mpdfile = null;
this.baseurl = "";
this.playingSegmentIndex = 0;
this.bufferUpdated = false;
this.initRange = 0;
this.width = 200;
this.height = 200;
this.segments = 0;
this.period = 0;
this.duration = 0;
this.codecs = String.EMPTY;
this.representation = null;
this.videoPlayer.src = this.mediaUrl;
this.videoPlayer.pause();
this.videoPlayer.width = this.width;
this.videoPlayer.height = this.height;
var self = this;
this.videoPlayer.addEventListener("play", function() {
console.log("from videoplayer play event");
});
self.videoPlayer.addEventListener("canplay", function () {
console.log("can play");
self.videoPlayer.play();
});
self.videoPlayer.addEventListener("loadstart", function () {
console.log("started loading metadate");
});
self.videoPlayer.addEventListener("onloadedmetadata", function() {
console.log("loaded metadata");
});
self.videoPlayer.addEventListener("oncanplaythrough", function() {
console.log("can play through");
});
self.videoPlayer.addEventListener("sourceended", function() {
console.log("has ended");
});
self.videoPlayer.addEventListener("onaddtrack", function() {
console.log("added track");
});
self.videoPlayer.addEventListener("play", function() {
console.log("called play");
});
self.videoPlayer.addEventListener("update", function() {
console.log("updated");
});
self.videoPlayer.addEventListener("loadeddata", function() {
console.log("has loaded data");
});
//this.sourceBuffer= null;o
this.startInit = false;
this.source.addEventListener("sourceopen", function() {
console.log("source has opened " + self.source.readyState);
});
this.source.addEventListener("sourceopen", this.init.call(self), false);
this.source.addEventListener("sourceclose", function() {
console.log("mediasource closed " +self.source.readyState);
}, false);
this.source.addEventListener("sourceended", function () {
console.log("mediasource ended "+self.source.readyState);
}, false);
this.source.addEventListener("endOfStream", function() {
console.log("have come to end of stream");
});
this.sourceBuffer = null;
}
video.prototype.timeToDownLoad = function (range) {
var videoself = this;
var vidDur = range.split("-");
// Time = size * 8 / bitrate
return (((vidDur[1] - vidDur[0]) * 8) / videoself.bandwidth);
}
video.prototype.fetchMpd = function (filename) {
if (this.startInit == false) {
this.startInit = true;
var videoself = this;
var httprequest = new XMLHttpRequest();
httprequest.open("GET", "PressPause/Media/" + filename + "mpd");
httprequest.send();
httprequest.onreadystatechange = function() {
var self = this;
if (self.readyState == 4) {
if (self.status == 200) {
videoself.mpdfile = new DOMParser().parseFromString(self.responseText, "application/xml");
videoself.processMpd.call(videoself,videoself.mpdfile);
}
}
};
}
}
video.prototype.processDuration = function(durationTemp) {
var worker = durationTemp.split("PT")[1];
var hour = worker.split("H")[0].slice(0, 1);
var mins = worker.split("H")[1].slice(0, 2);
var secss = worker.split("M")[1].slice(0, 5);
console.log("the hour is " + hour +" mins "+mins+ " secs "+secss);
};
video.prototype.processMpd=function(mpd) {
this.InitializationSegment = mpd.querySelectorAll("Initialization")[0];
this.initRange = this.InitializationSegment.getAttribute("range");
this.period = mpd.querySelectorAll("Period")[0];
var tempduration = this.period.getAttribute("duration");
this.processDuration(tempduration);
this.representation = mpd.querySelectorAll("Representation")[0];
this.bandwidth = this.representation.getAttribute("bandwidth");
this.videoPlayer.width = this.representation.getAttribute("width");
this.videoPlayer.height = this.representation.getAttribute("height");
this.codecs = this.representation.getAttribute("codecs");
this.segments = mpd.querySelectorAll("SegmentURL");
this.processRange(this.initRange);
this.startInitialization("the url", this.initRange);
console.log(this.initRange);
}
video.prototype.startInitialization = function (url, range) {
var videoSelf = this;
while (videoSelf.source.readyState!="open") {
console.log("mediaSource not open");
}
var codecs = 'video/mp4;codecs="avc1.64001E"';
console.log("can play codec " + codecs + videoSelf.videoPlayer.canPlayType(codecs));
//'video/mp4;codecs="' + videoSelf.codecs + '"'
videoSelf.sourceBuffer = videoSelf.source.addSourceBuffer(codecs);
videoSelf.sourceBuffer.addEventListener("updateend", function () {
console.log("updateend occurs when the append or remove operation has ended");
console.log("append mode " + videoSelf.sourceBuffer.AppendMode);
console.log("buffered below");
console.log(videoSelf.sourceBuffer.buffered);
console.log(videoSelf.sourceBuffer.updating);
});
videoSelf.sourceBuffer.addEventListener("update", function () {
console.log("update occurs when the append or remove operation has ended successfully");
console.log("append mode " +videoSelf.sourceBuffer.AppendMode);
console.log("buffered below");
console.log(videoSelf.sourceBuffer.buffered);
console.log(videoSelf.sourceBuffer.updating);
});
videoSelf.sourceBuffer.addEventListener("error", function () {
console.log("error occurs when the append or remove operation is aborted by calling abort");
console.log("append mode " + videoSelf.sourceBuffer.AppendMode);
console.log("buffered below");
console.log(videoSelf.sourceBuffer.buffered);
console.log(videoSelf.sourceBuffer.updating);
});
if (url && range) {
console.log("start processing");
var httprequest = new XMLHttpRequest();
httprequest.open("GET", "PressPause/Media/videomp4", true);
httprequest.responseType = "arrayBuffer";
httprequest.setRequestHeader("Range", "bytes=" + range);
httprequest.send();
httprequest.addEventListener("readystatechange", function() {
if (this.readyState == 4) {
if (this.status == 200) {
try {
videoSelf.sourceBuffer.appendBuffer(new Uint8Array(httprequest.response));
videoSelf.videoPlayer.readyState = 2;
videoSelf.videoPlayer.pause();
videoSelf.videoPlayer.play();
console.log("source is "+videoSelf.source.readyState);
console.log("player is " + videoSelf.videoPlayer.readyState);
console.log("player error is " + videoSelf.videoPlayer.error);
videoSelf.sourceBuffer.addEventListener("updateend", videoSelf.startProcessingSegments.bind(videoSelf));
} catch (e) {
console.log(e.message + "from startInitialization " + e);
}
}
}
});
} else {
throw new Error("range and url cannot be undefined");
}
}
video.prototype.startProcessingSegments = function () {
var self = this;
console.log(self);
console.log("starting to fetch data");
self.sourceBuffer.addEventListener("updateend", self.isupdating.bind(self), false);
self.isupdating.call(self);
console.log("from startProcessingSegments " + self.source.activeSourceBuffers);
console.log("from startProcessingSegments " + self.playingSegmentIndex);
console.log("can play type= " + self.videoPlayer.canPlayType('video/mp4;codecs="' + self.codecs + '"'));
self.bufferUpdated = true;
console.log(self.source.sourceBuffers);
console.log(self.sourceBuffer.buffered);
}
video.prototype.isupdating = function () {
var self = this;
self.videoPlayer.removeEventListener("updateend", self.startProcessingSegments);
for (self.playingSegmentIndex; self.playingSegmentIndex < self.segments.length; self.playingSegmentIndex++) {
console.log(self.sourceBuffer.updating);
self.checkSegmentArray.call(self);
self.playSegment("url", self.segments[self.playingSegmentIndex].getAttribute("mediaRange"));
}
};
video.prototype.addingSegmentIndex = 0;
video.prototype.checkSegmentArray = function () {
var videoS = this;
if (videoS.segmentArray.length > 0 && !videoS.sourceBuffer.updating) {
var thevideo = videoS.segmentArray.shift();
videoS.sourceBuffer.appendBuffer(thevideo);
console.log("adding segment called"+videoS.addingSegmentIndex +" times");
console.log(thevideo);
videoS.addingSegmentIndex++;
}
console.log(videoS.videoPlayer.readyState);
console.log(videoS.sourceBuffer);
console.log(videoS.segmentArray.length + " items left");
console.log(videoS.sourceBuffer.updating);
console.log(videoS.source.readyState);
console.log("from checkSegmentArray");
console.log("\n");
}
video.prototype.playSegment = function (url, range) {
console.log("it happend again");
var videoSelf = this;
var httprequest = new XMLHttpRequest();
httprequest.open("GET", "PressPause/Media/videomp4", true);
httprequest.setRequestHeader("Range", "bytes=" + range);
httprequest.responseType = "arrayBuffer";
httprequest.send();
httprequest.onreadystatechange=function(e) {
if (this.readyState == 4) {
if (this.status == 200) {
videoSelf.segmentArray.push(new Uint8Array(httprequest.response));
videoSelf.checkSegmentArray.call(videoSelf);
}
}
}
};
video.prototype.processRange= function(range) {
var rangeArray = range.toString().split("-");
var first = rangeArray[0];
var second = rangeArray[1];
console.log("first: " + first, "second " + second);
}
video.prototype.init = function () {
console.log("calling mpd");
if (this.startInit==false) {
this.fetchMpd("video");
}
}
the new mpd generated using ffmpeg how can i process it in javascript what should i be looking for
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:mpeg:DASH:schema:MPD:2011" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" type="static" mediaPresentationDuration="PT110.2S" minBufferTime="PT1S" profiles="urn:webm:dash:profile:webm-on-demand:2012">
<Period id="0" start="PT0S" duration="PT110.2S">
<AdaptationSet id="0" mimeType="video/webm" codecs="vp8" lang="eng" width="1280" height="720" bitstreamSwitching="true" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Representation id="0" bandwidth="134033">
<BaseURL>C:\Users\solo\newfilemuxer.webm</BaseURL>
<SegmentBase indexRange="1223146-1223345">
<Initialization range="0-249"/>
</SegmentBase>
</Representation>
</AdaptationSet>
</Period>

You should take the codec attribute information of the MPD, maybe that's an issue. Does your content play when you append the segments directly to the source buffer? Can you also post your MPD with access to the content? Does the content play using the dash.js or bitdash MPEG-DASH players?