I have data, timestamp, that comes from the server as a unix timestamp. I am trying to dynamically insert this in every second. I can get it to successfully console.log the time (console.log(x)) but it won't return it and insert the time in the DOM.
<template>
<div>
<span> {{ checkItemExpiry(timestamp) }}</span>
</div>
</template>
<script>
export default {
methods: {
convertTime: function(time) {
var sec_num = parseInt(time, 10);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
let x = (hours + ":" + minutes + ":" + seconds);
console.log(x)
return x
},
checkItemExpiry: function(expireTimestamp) {
let startTime = expireTimestamp;
setInterval(() => {
let currentTime = (new Date()).getTime() / 1000;
this.convertTime((startTime-currentTime))
}, 1000);
}
}
}
</script>
Related
In my vue-app I'm using the VueToube-package. So far it works fine, but I want to display the duration of each video so I tried to do this:
<div v-for="(review, index) in reviews" :key="index">
<youtube
:video-id="video"
:width="420"
:ref="'video' + index"
#ready="ready"
></youtube>
<div>
{{ time }}
</div>
</div>
Then I'm doing this:
data(){
time: '00:00'
},
methods: {
ready(player) {
Object.keys(this.$refs).forEach((el) => {
this.$refs[el][0].player.getDuration().then((result) => {
this.videoDuration(result);
});
});
},
videoDuration(time) {
time = Math.round(time);
let minutes = Math.floor(time / 60);
let seconds = time - minutes * 60;
seconds = seconds < 10 ? "0" + seconds : seconds;
minutes = minutes < 10 ? "0" + minutes : minutes;
this.time = minutes + ":" + seconds;
},
This does not really work since the results is each video having the same length/duration.
What am I doing wrong?
Hi I'm just trying up setstate a component with interval.I put interval code in componentdidmount and clear it in componentWillUnmount.
It should stops intervalling when user navigates another screen but console logs says it continues.
Also i want to works this in every 1 second but when i put interval time as 1000 it works in 3 second
constructor(props) {
super(props);
this.state = {
text:'',
};
this._interval = null;
}
componentDidMount() {
if (!this._interval) {
console.log('this._interval',this._interval)
var endNew = new Date(this.props.end);
var distance = endNew.getTime() - newNow.getTime();
var hour = Math.floor(distance / 1000 / 60 / 60);
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (hour < 1 && minutes < 1 && seconds < 2) {
this.setState({isClosed: false});
} else {
this.setState({
textt: hour + ' h ' + minutes + ' m ' + seconds + 's',
});
}
}, 1000);
}
}
componentWillUnmount() {
clearInterval(this._interval);
clearTimeout(this._interval);
}
if (!this._interval) {
console.log('this._interval',this._interval)
and console log = this._interval null
In case you are using react-navigation stacknavigator won‘t callcomponentdidmount when pushing a new view on top.
As you can see in docs, you should rather subscribe to focus/blur.
I'm having issues in this process . First is that I have a button in disabled state(true) and I need to change that value to false when the video is uploaded . I have this scenary and I think I got a windows object inside the changing method . Any idea, help please . I'm getting undefined value for the variable.
data: () => ({
buttonState: true} }),
changeBehavior() {
let self
(function () {
const input = document.getElementById('uploader')
self = this
console.log(this)
const changing = ({ target: { files } }) => {
if (input.files.length > 0) {
// self.buttonState = false
const video = document.getElementById('output-video')
video.src = URL.createObjectURL(files[0])
}
}
input.addEventListener('change', changing)
})()
const au = document.getElementById('output-video')
au.onloadedmetadata = () => {
const hidden = document.getElementById('hiddenSlider')
hidden.removeAttribute('hidden')
const muteHidden = document.getElementById('muteHidden')
muteHidden.removeAttribute('hidden')
self = this
self.range = [0, au.duration]
this.max = au.duration
const secNum = parseInt(au.duration, 10)
let hours = Math.floor(secNum / 3600)
let minutes = Math.floor((secNum - (hours * 3600)) / 60)
let seconds = secNum - (hours * 3600) - (minutes * 60)
if (hours < 10) {
hours = '0' + hours
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (seconds < 10) {
seconds = '0' + seconds
}
document.getElementById('renderizado').innerHTML =
hours + ':' + minutes + ':' + seconds
}
},
<v-btn
id="run"
class="accent-3 blue ml-15"
dark
#click="$refs.inputUpload.click()"
>
<input
v-show="false"
id="uploader"
ref="inputUpload"
accept=".mkv,video/*"
type="file"
#click="changeBehavior"
>
Select to Upload Video
</v-btn>
<v-btn
id="doTrimming"
block
class="accent-3 blue mt-5"
dark
:disabled="buttonState"
#click="cutIt"
>
Trim Video Now
</v-btn>
Where you define self you need to assign this to it then.
changeBehavior() {
const self = this;
const callback = function() {
// now you can access the vue instance when in another functions scope
self.buttonState = true;
}
}
I want to make a clock timer that starts on page load. like below
00 m: 06 s
start a setInterval in the componentDidMount and update the state every second.
state = {
time: 0,
};
componentDidMount() {
this.timer = setInterval(() => {
this.setState(prev => {
return {
time: prev.time + 1,
};
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
and extract seconds,minutes,hours
const { time } = this.state;
const hours = Math.floor(time / 3600);
const minutes = Math.floor((time - hours * 3600) / 60);
const seconds = time - minutes * 60 - hours * 3600;
Here is an expo demo
How can I change the date from my countdown?
I know it is working but can't find the place to change the date!
I'm a newby, sorry for asking!
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
function countdown_proc() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
//logic for the two_digits ON setting
if(settings['format'] == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}
//update the countdown's html values.
if(!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
} else {
alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery);
Look for a separate code, or add these lines. Change function/variable/date accordingly
/** Countdown Timer **/
$(document).ready(function() {
"use strict";
$("#countdown").countdown({
date: "20 sep 2020 12:00:00", /** Enter new date here **/
format: "on"
},
function() {
// callback function
});
});
What you provided looks to be the function (the engine) and the code you're looking for calls this. I think you'll find what you are looking for is a line that says something like:
$.fn.countdown({
'date': 'PLACE DATE HERE',
'format': null
}, function(){
//Some code here
);
The values may be slightly different but it'll be something like that. When you call that function, you provide the date to work off of.