I have a difficulty here showing video using react-native-video.
The server is using Express, and using GridFSBucket to retrieve the video from mongodb.
The problem is that:
The video from GridFSBucket won't show. But when I tried to place the video in public folder, it will show.
So, my guess is that there is something wrong with how I serve the video. Here is my code from the server:
const bucket = new GridFSBucket(db.original(), { bucketName: "fs" });
const fileDetail = await db.original().collection("fs.files").findOne({_id: idObj});
if (isNullOrUndefined(fileDetail)) {
throw new NoContentException(`asset not found for id ${id}`);
}
const range = req.headers["range"]
if (range && typeof range === "string") {
const parts = range.replace(/bytes=/, "").split("-");
const partialstart = parts[0];
const partialend = parts[1];
const start = parseInt(partialstart, 10);
const end = partialend ? parseInt(partialend, 10) : fileDetail.length - 1;
const chunksize = (end - start) + 1;
res.writeHead(206, {
'Accept-Ranges': 'bytes',
'Content-Length': chunksize,
'Content-Range': 'bytes ' + start + '-' + end + '/' + fileDetail.length,
'Content-Type': fileDetail.contentType
});
bucket.openDownloadStream(idObj, {start, end}).pipe(res);
} else {
res.header('Content-Length', fileDetail.length);
res.header('Content-Type', fileDetail.contentType);
bucket.openDownloadStream(idObj).pipe(res);
}
Thanks in advance for your answer ^_^
I found the solution.
The line:
bucket.openDownloadStream(idObj, {start, end}).pipe(res);
should be:
bucket.openDownloadStream(idObj, {start, end: end - 1}).pipe(res);
Related
Hi all trying to write some logic in paper.js (also using opentype.js for font data) so that when a number contains two or more consecutive zeros' the zero path is divided so that it is solid.
Things i know a zero path, using my particular font, is made up of an outer path with 19 segments and an inner path made up of 18 segments
So I thought would try to iterate over all paths check if a path has 19 segments and the next path has 18 segments and call path.unite() which kind of works. But I only want it to do this with consecutive '0' eg '100', '1000' but not 10.
So i was trying to do an if else statment where if-else (the current path has 18 segments and the next path is less than 18 segments) if true then do nothin or call path.divide()?
Im sure there is a way better way of doing this. Can you help please.
link to codepen
paper.install(window);
window.onload = () => {
paper.setup("canvas");
opentype.load(
"https://assets.codepen.io/1070/pphatton-ultralight-webfont.woff",
(err, font) => {
if (err) {
console.log(err);
} else {
const fontPath = font.getPath("10k", 0, 100, 100).toSVG();
const count = new paper.CompoundPath(fontPath);
count.unite();
count.children.forEach((child, i) => {
if (
child.segments.length === 19 &&
count.children[i + 1].segments.length === 18
) {
const eye = child.unite();
eye.selected = true;
} else if(
count.children[i + 1].segments.length === 18
&& child.segments.length < 18
) {
console.log('hello');
// const target = child.divide();
count.children[i].fillColor = 'black'
} else{
}
});
// const flatCount = count.children[1].unite()
// console.log(count.children[2].segments.length)
// const flatCountTwo = count.children[5].unite()
// flatCount.translate(5,0)
count.fillColor = "red";
project.activeLayer.fitBounds(view.bounds.scale(0.6));
}
}
);
};
I think that rather than using Font.getPath to retrieve a single svg path for the whole text, you should use Font.getPaths to retrieve an svg path for each character.
This way you can quite simply do your analysis on the input string directly and handle the consecutive 0 differently than other characters.
Edit
In order to detect the consecutive zeros, yes, you could use a regex or loop over the characters, like I did in the following example.
Here's a fiddle showcasing a possible solution.
const handleZero = (path) => {
path.children = path.children.slice(0, 1);
};
const getConsecutiveZerosIndices = (content) => {
const zero = '0';
return [...content]
.map((char, i) => ({ char, i }))
.filter(({ char, i }) => {
const previousCharacter = content?.[i - 1];
const nextCharacter = content?.[i + 1];
return char === zero && (previousCharacter === zero || nextCharacter === zero);
})
.map(({ i }) => i);
};
const drawText = (content, font) => {
const fontPaths = font.getPaths(content, 0, 100, 100);
const consecutiveZerosIndices = getConsecutiveZerosIndices(content);
const paths = fontPaths.map((fontPath, i) => {
const path = new paper.CompoundPath(fontPath.toSVG());
if (consecutiveZerosIndices.includes(i)) {
handleZero(path);
}
return path;
});
const group = new paper.Group(paths);
group.fillColor = 'red';
return group;
};
const draw = (font) => {
const path1 = drawText('10k', font);
const path2 = drawText('100k', font);
const path3 = drawText('1000k', font);
path2.position = path1.position.add(0, path1.bounds.height * 1.2);
path3.position = path2.position.add(0, path2.bounds.height * 1.2);
paper.project.activeLayer.fitBounds(paper.view.bounds.scale(0.6));
};
paper.setup('canvas');
opentype.load(
'https://assets.codepen.io/1070/pphatton-ultralight-webfont.woff',
(err, font) => draw(font)
);
I've been struggling with this piece of code for a while and I'm reaching out for help. I have a array of dates and I"m trying to make http requests in order of the array and to write the return information, also in order.
Here is my code:
const dateArray = ['november-22-2019', 'november-25-2019', 'november-26-2019', 'november-27-2019', 'november-29-2019'];
async function loppThroughArray() {
for (const date of dateArray) {
const options = {
url: process.env.URL + date
};
await asyncRequest(options, date);
}
}
async function asyncRequest(options, date) {
request(options, function(error, response, html) {
if (error) {
return;
}
if (response.statusCode !== 200) {
return;
}
const $ = cheerio.load(html);
const content = $('.entry-content');
const formattedContent = content.text()
.split('\t').join('')
.split('\n\n\n').join('')
.split('\n\n').join('');
const dataToBeWritten = '### ' + date + '\n' + formattedContent + '\n\n';
fs.appendFileSync(`./WODs/${currentDate}.md`, dataToBeWritten, 'utf-8', {'flags':'a+'});
fs.appendFileSync(`./WODs/${currentDate}.txt`, dataToBeWritten, 'utf-8', {'flags':'a+'});
});
}
loppThroughArray();
I managed to solve this by using a version of 'request' that uses promises instead of callbacks. See code:
async function loppThroughArray() {
for (const date of dateArray) {
const options = {
url: process.env.URL + date
};
await asyncRequest(options, date);
console.log('fetching: ', date);
}
}
async function asyncRequest(options, date) {
await rp(options)
.then(function(html){
const $ = cheerio.load(html);
const content = $('.entry-content');
const formattedContent = content.text()
.split('\t').join('')
.split('\n\n\n').join('')
.split('\n\n').join('');
const dataToBeWritten = '### ' + date + '\n' + formattedContent + '\n\n';
fs.appendFileSync(`./WODs/${currentDate}.md`, dataToBeWritten, 'utf-8', {'flags':'a+'});
fs.appendFileSync(`./WODs/${currentDate}.txt`, dataToBeWritten, 'utf-8', {'flags':'a+'});
});
}
loppThroughArray();
Please i am trying to modify the filename of a selected file posted by a user before uploading to Amazon S3 using the edgee:slinghot package. I can upload the file quite alright but the problem is how do i modify the filename.
I modified it on the client using by saving the modified name into a variable. My problem now is how to access that variable declared and saved on the Client in the Server environment. I just can't seem to wrap my head around it.
'change .js-submitTeamPaper' : function(event , template){
event.preventDefault();
let paper = template.paperDetails.get();
newFilename = paper[0].paper_name + "_"
_.map(paper[0].member , (member)=>{
newFilename += "_" + member.regnum + "_"
});
newFilename += paper[0]._id;
let file = event.target.value;
let fileArray = file.split(".");
let ext = fileArray[fileArray.length - 1];
newFilename += "." + ext;
studentFileUpload(event , template , 'submitTeamTermPaper' , 'divProgress');
}
The code to upload the file.
let _collectfile = (event , template) =>{
let file = event.target.files[0]
return file
}
let _showProgressBar = (div) => {
let _div = document.getElementById(div);
_div.classList.remove("hide");
}
let _closeProgressBar = (div) => {
let _div = document.getElementById(div);
_div.classList.add("hide");
}
let _slingShotUploadConfigure = (event , template , folder ,div) => {
let _upload = new Slingshot.Upload(folder);
let _file = _collectfile(event , template);
_showProgressBar(div);
_upload.send(_file , (error , downloadUrl) => {
template.uploader.set();
if (error){
//throw new Meteor.Error('500' , error.reason);
event.target.value = '';
sAlert.error(error.reason , {effect: 'bouncyflip',
position: 'bottom-right', timeout: 3000, onRouteClose: false, stack: false, offset: '150px'});
_closeProgressBar(div);
}
else{
sAlert.success('File was uploaded successfully' , {effect: 'genie',
position: 'bottom-right', timeout: 3000, onRouteClose: false, stack: false, offset: '150px'});
event.target.value = '';
template.downloadUrl.set(downloadUrl);
_closeProgressBar(div);
//return downloadUrl;
}
});
template.uploader.set(_upload);
}
export default function(event , template , folder ,div , progress){
return _slingShotUploadConfigure(event , template , folder,div , progress)
}
I then imported the module as studentFileUpload from '../../modules/handle-fileuploads';
Below is the meteor-slingshot code to do the upload
Slingshot.createDirective("submitTeamTermPaper", Slingshot.S3Storage, {
bucket: Meteor.settings.BucketName,
AWSAccessKeyId : Meteor.settings.AWSAccessKeyId,
AWSSecretAccessKey : Meteor.settings.AWSSecretAccessKey,
acl: "public-read",
authorize: function () {
// do some validation
// e.g. deny uploads if user is not logged in.
if (this.userId) {
return true;
}
},
key: function (file) {
//file here is the file to be uploaded how do i get the modified file name i defined in the client as newFilename here
let timeStamp = + new Date;
//let newFilename = file.name.replace(/_/g , "-");
return 'Team_Term_Papers/' + timeStamp + '_' + '_' + newFilename;
}
});
From my code newFilename is the variable that holds the modified filename. How do i access it from the server environment. Any help is really appreciated. Thanks
You can pass extra information through to slingshot using metacontext:
metacontext = {newName: "foo"};
let _upload = new Slingshot.Upload(folder,metacontext);
Then you can access that metacontext in your key function:
key: function (file,metacontext) {
let timeStamp = + new Date;
let newFilename = metacontext ? metacontext.newName : file.name;
newFilename = newFilename.replace(/_/g , "-");
return 'Team_Term_Papers/' + timeStamp + '_' + '_' + newFilename;
}
How to serialize JSON for Ruby API?
Angular 1
$scope.submitForm = function() {
var data = {"contato": $scope.contato, "id":$scope.contato.id, "_method":'PUT'};
$http.post(
'http://myApi/contatos/' + $scope.contato.id,
**$httpParamSerializerJQLike(data)**,
{
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
datatype: "JSONP"
}).then(function successCallback(response) {
modalContato.show();
setTimeout(function (){
modalContato.hide();
$state.go('contato-detalhe', {"id":$scope.contato.id});
}, 1500);
});
};
Angular2:
insertContato(contato: Contato) {
let headers = new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
});
let options = new RequestOptions({ headers: headers });
this._http
.post(this.urlApi + '/contatos', JSON.stringify(contato), options)
.subscribe(data => {
console.log('Funciona: ' + data.text());
}, error => {
console.log('Erro: ' + error.text())
});
}
"JSON.stringify(contato)"
It does not have the same behavior as $httpParamSerializerJQLike(data).
Json's broken in the server...
Started POST "/contatos" for 127.0.0.1 at 2016-04-13 13:25:55 -0300
Processing by ContatosController#create as HTML
Parameters: {"{\"nome\":\"asd\",\"email\":\"asd#asda.com\",\"telefone\":\"123\"}"=>nil}
Completed 400 Bad Request in 4ms (ActiveRecord: 0.0ms)
Correct is:
Started POST "/contatos" for 127.0.0.1 at 2016-04-12 17:00:24 -0300
Processing by ContatosController#create as JSON
Parameters: {"contato"=>{"nome"=>"felipe", "telefone"=>"5555"}}
Completed 200 OK in 278ms (Views: 0.1ms | ActiveRecord: 229.4ms)
I had a similar problem, i can solve this:
import { Headers, Http, Response, URLSearchParams, RequestOptions } from '#angular/http';
let headers = new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': '*/*'});
let options = new RequestOptions({ headers: headers });
let body = new URLSearchParams();
body.set("message", JSON.stringify(m_dataRequest));
body.set("webService", "authService");
return this.http
.post(this.Url, body.toString(), options)
.toPromise()
.then(this.extractData)
.catch(this.handleError);
URLSearchParams normalized the params of the form and the pipes dimiss, this work for me.
I hope this solve your problem.
I'm going to preface this by saying that this may not be the best way to handle this, but it's how I took care of the problem for myself (The Angular 2 docs don't seem to mention x-www-form-urlencoded anywhere).
So if your data is set up like
var data = {"contato": $scope.contato, "id":$scope.contato.id, "_method":'PUT'};
You want to basically convert it to a form yourself.
var encodedData = "contato=" + contato + "&id=" + contato.id + "&_method=PUT";
then you can modify your POST request to look like this
this._http
.post(this.urlApi + '/contatos', encodedData, options)
.subscribe(data => {
console.log('Funciona: ' + data.text());
}, error => {
console.log('Erro: ' + error.text())
});
There's no need to JSON.stringify it since you're not passing json, you're passing form data.
I hope this helps.
I wrote a function in my http.ts provider like so ---
private formatData(data){
let returnData = '';
console.log(data);
let count = 0;
for (let i in data){
if(count == 0){
returnData += i+'='+data[i];
}else{
returnData += '&'+i+'='+data[i];
}
count = count + 1;
console.log(returnData);
}
return returnData;
}
Call it like this.
post('localhost/url',data){
data = this.formatData(data);
}
Just copy the relative codes from angularjs http module
import {
isArray,
forEach,
isObject,
isDate,
isFunction,
isUndefined,
isNumber,
} from 'lodash';
function toJsonReplacer(key, value) {
let val = value;
if (
typeof key === 'string' &&
key.charAt(0) === '$' &&
key.charAt(1) === '$'
) {
val = undefined;
}
return val;
}
function toJson(obj, pretty = undefined) {
if (isUndefined(obj)) return undefined;
if (!isNumber(pretty)) {
pretty = pretty ? 2 : null; // tslint:disable-line no-parameter-reassignment
}
return JSON.stringify(obj, toJsonReplacer, pretty);
}
function serializeValue(v) {
if (isObject(v)) {
return isDate(v) ? v.toISOString() : toJson(v);
}
return v;
}
function forEachSorted(obj, iterator, context = null) {
const keys = Object.keys(obj).sort();
for (let i = 0; i < keys.length; i += 1) {
iterator.call(context, obj[keys[i]], keys[i]);
}
return keys;
}
/**
* This method is intended for encoding *key* or *value* parts of query component. We need a custom
* method because encodeURIComponent is too aggressive and encodes stuff that doesn't have to be
* encoded per http://tools.ietf.org/html/rfc3986:
* query = *( pchar / "/" / "?" )
* pchar = unreserved / pct-encoded / sub-delims / ":" / "#"
* unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"
* pct-encoded = "%" HEXDIG HEXDIG
* sub-delims = "!" / "$" / "&" / "'" / "(" / ")"
* / "*" / "+" / "," / ";" / "="
*/
function encodeUriQuery(val, pctEncodeSpaces = undefined) {
return encodeURIComponent(val)
.replace(/%40/gi, '#')
.replace(/%3A/gi, ':')
.replace(/%24/g, '$')
.replace(/%2C/gi, ',')
.replace(/%3B/gi, ';')
.replace(/%20/g, pctEncodeSpaces ? '%20' : '+');
}
export function jQueryLikeParamSerializer(params) {
if (!params) return '';
const parts = [];
serialize(params, '', true);
return parts.join('&');
function serialize(toSerialize, prefix, topLevel = undefined) {
if (isArray(toSerialize)) {
forEach(toSerialize, (value, index) => {
serialize(value, prefix + '[' + (isObject(value) ? index : '') + ']');
});
} else if (isObject(toSerialize) && !isDate(toSerialize)) {
forEachSorted(toSerialize, (value, key) => {
serialize(
value,
prefix + (topLevel ? '' : '[') + key + (topLevel ? '' : ']'),
);
});
} else {
if (isFunction(toSerialize)) {
toSerialize = toSerialize(); // tslint:disable-line no-parameter-reassignment
}
parts.push(
encodeUriQuery(prefix) +
'=' +
(toSerialize == null
? ''
: encodeUriQuery(serializeValue(toSerialize))),
);
}
}
}
I've met the similar issue when was upgrading from angular 1.x
Here is my solution which also process nested JSON objects:
function Json2FormEncoded(json_obj) {
let path = arguments[1] || '';
let s = '', p = '';
for (let i in json_obj) {
p = path == '' ? i : path + '[' + i + ']';
s = s ? s + "&" : s;
if (typeof json_obj[i] == 'object') {
s += Json2FormEncoded(json_obj[i], p);
} else {
s += p + '=' + encodeURIComponent(json_obj[i]);
}
}
return s;
}
Hope you'll find it useful!
Also check it here
Have a question regarding contentsync phonegap plugin (https://www.npmjs.com/package/phonegap-plugin-contentsync).
Will be very appreciated if someone could help.
The core of the problem is that my REST server allowing me to download .epub files (witch are same as .zip) only by sending GET request similar to:
https://test-api.books.com/api/getPublishedEpub?session_hash=1235&publication_id=abv1243'
Providing this link to the plugin '.sync' call I get a 'Invalid request method' response from the server...
While trying to download ordinary .zip everything works just fine.
var pub_id = $scope.currentBook.publication_id, epubUrl = 'https://test-api.books.com/api/getEpub?session_hash='
+ $rootScope.sessionHash+ '&publication_id=' + pub_id;
var downloadBtn = document.getElementById("downloadBtn");
console.log('Download cliked');
var sync = ContentSync.sync({ src: epubUrl, id: 'book'+ pub_id});
sync.on('progress', function (data) {
downloadBtn.innerHTML = "Downloading: " + data.progress + "%";
});
sync.on('complete', function (data) {
console.log(data.localPath);
for (var x = 1; x <= 17; x++) {
var fileUrl = "file://" + data.localPath;
console.log(fileUrl);
}
downloadBtn.innerHTML = 'Download';
});