Hi all, I have an item in my collection that updates from the server.
On my client side for some reason I cannot get it to be reactive…
Just wondering if any of you could help.
When the video is download the item in the collection is getting updated and I can see it in real time.
I want to be able to show this progress in the render section at the bottom as text but it just stays at 0.
The objects in the db:
{
"_id": "FMHk2KMtLxhS5pCyL",
"videoId": "JByDbPn6A1o",
"details": {
"videoId": "JByDbPn6A1o",
"progress": {
"percentage": 100,
"transferred": 41339278,
"length": 41339278,
"remaining": 0,
"eta": 0,
"runtime": 27,
"delta": 2378322,
"speed": 1463337.274336283
}
},
"complete": false
}
The error:
console.log shows this: []
and the progress value is 0 and does not increase as the value in the database does
import React from 'react';
import ReactDOM from 'react-dom';
import Progress from '/imports/collections/progress/progress.js';
export default class MyPage extends React.Component{
constructor(){
super();
this.state = {
subscription: {
progress : Meteor.subscribe("progress")
}
}
}
getProgress(videoIdParam){
let returnedObject = Progress.find({videoId: videoIdParam}).fetch();
let progress = 0;
console.log(returnedObject);
if(returnedObject === null || returnedObject.details === undefined || returnedObject === {} || returnedObject === []){
}else{
progress = returnedObject.details.progress.percentage;
}
return progress;
}
componentWillUnmount(){
this.state.subscription.progress.stop();
}
youtubeParser(url){
if(url === null || url == undefined || url === ""){
return "";
}else{
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
}
render(){
let videoId = this.youtubeParser($('#basic-url').val());
return (
<div className="body content rows scroll-y">
<input type="text" className="form-control" id="basic-url" aria-describedby="basic-addon3"/>
<div >
{this.getProgress(videoId)}
</div>
</div>
)
}
}