Timer on Module

[sdetweil]

@dsmtweaker also think the getVid routine return is wrong

[A Former User]

@dsmtweaker
getDom() is not good position for your job. That function will be called at anytime when it is needed to redraw your module by MM, not by you. You don’t know when it will be executed on which condition.

Instead direct calling getDom, use updateDom(). Whenever you call ‘this.updateDom()’, MM will execute your getDom() and redraw your module with result of getDom()

Then, with setInterval(), you can repeat updateDom as your wish.

Of course, setInterval and updateDom should move out of getDom. So to where?

start() isn’t good also. My suggestion is, to create function yourJob() and put setInterval and uodateDom into yourJob(). Then call it by notification - “DOM_OBJECT_CREATED”.

[dsmtweaker]

@sean So, should I be putting the updateDom in a function? Such as…

// Override dom generator.
		getDom: function() {
				var intervalID = window.setInterval(this.GetVid, 60000);
				var video =  document.createElement("video");
				video.src = this.config.videoSRC;
				video.autoplay = true;
				video.loop = this.config.loop;
			function GetVid() {
				updateDom
					}
					}

[A Former User]

@dsmtweaker
I’ve added in prior post. Sorry I’m typing on my phone. So I cannot write long…

[A Former User]

job: function() {
  setInterval(()=>{
    this.updateDom() // this will execute your getDom()
  }, yourInterval)
},

notificationReceived: function (noti, payload, sender) {
  if (noti == “DOM_OBJECT_CREATED”) this.job()

},

getDom: function () {
  //making  your video DOM here.
}

[dsmtweaker]

@sean Sorry for being so new at this. And thank you for all of the help. I tried using your code.

get: function() {
setInterval(()=>{this.updateDom()}, 60000)
notificationRecieved: function (noti, payload, sender) {
if (noti = “DOM_OBJECT_CREATED”) this.job()

		},
getDom: function ()
			var video =  document.createElement("video");
			video.src = this.config.videoSRC;
			video.autoplay = true;
			video.loop = this.config.loop;
             },

});

But I get “Uncaught SyntaxError: Unexpected token (” from notificationRecieved: function (noti, payload, sender) {

[sdetweil]

@dsmtweaker you missed some of the job function
this.updateDom()

}, yourInterval)

[dsmtweaker]

@sdetweil It is there in the get:function

 get: function() {setInterval(()=>{this.updateDom()}, 60000)
	notificationRecieved: function (noti, payload, sender) {
		if (noti = "DOM_OBJECT_CREATED") this.job()

		},
getDom: fuction ()
			var video =  document.createElement("video");
			video.src = this.config.videoSRC;
			video.autoplay = true;
			video.loop = this.config.loop;

},});

[sdetweil]

@dsmtweaker i hate code posting on this forum…

note that
getDom: fuction () is spelled wrong
and also missing the open brace

[sdetweil]

there are 3 routines (functions)… in seans post

// worker function
job: function() {
  // start a recurring timer that will tell MM to get the module updated dom content
  // this uses an inline function, be careful of braces and parens  matching
  setInterval(()=>{
    this.updateDom() // this will execute your getDom(), after 'yourInterval' time
  }, yourInterval)
},

// the function called when notifications are received from the system
notificationReceived: function (noti, payload, sender) {
   // if the notification is "dom is created", then call our worker function
  if (noti == “DOM_OBJECT_CREATED”) this.job() 

},

// the function called for the module to provide its dom content
getDom: function () {
  //making  your video DOM here.
}

[dsmtweaker]

@sdetweil I made all the corrections noted.

but on if (noti == “DOM_OBJECT_CREATED”) this.job() I am still getting the error SyntaxError: Invalid or unexpected token

[Mykle1]

@dsmtweaker said in Timer on Module:

but on if (noti == “DOM_OBJECT_CREATED”) this.job() I am still getting the error SyntaxError: Invalid or unexpected token

Excuse me for jumping in but the curly quotes containing DOM_OBJECT_CREATED will cause that error. Try:

if (noti == "DOM_OBJECT_CREATED") this.job()

The difference is slight, but enough.

[sdetweil]

@dsmtweaker its the darned cut/paste of the double quotes… in the web posting it shows the MS word document style quotes which cause an error with the javascript parser…

overtype those double quotes with the text editor…

[A Former User]

I’m back. Sorry for my prior mistypo and unsufficient post. I was typing that on my phone.

start: function() {
  this.timer = null  
  this.videoDom = null
},
getDom: function() {
  var container =  document.createElement("div")
  var video = document.createElement("video")
  video.id = "VIDEO"
  video.style.display = "none"
  video.autoplay = true
  video.loop = this.config.loop
  container.appendChild(video)
  this.videoDom = video
  return container 
// Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
},
notificationReceived: function(noti, payload, sender) {
  if (noti == "DOM_OBJECT_CREATED") this.work()
//DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
},
work: function(src = null, interval = null) {
  clearTimer(this.timer)
  interval = (interval) ? interval : this.config.interval
  src = (src) ? src : this.config.videoSRC
  this.playVideo(src)
  this.timer = setTimeout(()=>{
    this.work()
  }, interval)
//setTimeout is better than setInterval.
// you can repeat this function by interval. you can change interval and src with parameters of this function.
},
playVideo: function(src) {
  this.videoDom.src = src
  if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
  this.videoDom.play()
  // assign src to your videoDom and play it.
}

Not tested on real device, so maybe somthig is missed, but this is basic approach.
I didn’t use updateDom because there is no need to redraw whole module just for playing video.

[dsmtweaker]

@sean Thank you, and everyone else for all the help. It’s refreshing to find a forum that doesn’t automatically start bashing beginners.

I think my knowledge is just not ready for something this advanced yet. I used your code, and tried changes here and there to make it work, but still no luck. I am no longer getting any errors in the console. But nothing happens(ie- no video ever loads/plays) this is where I got the code so far…

Module.register(“MMM-htmlvideo”,{

// Default module config.
defaults: {
	videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
	loop: true,
		},

// get stylesheet
getStyles: function() {
	return ["htmlvideo.css"];
},



start: function() {
  this.timer = null  
  this.videoDom = null
},
getDom: function() {
 var container =  document.createElement("div")
 var video = document.createElement("video")
 video.src = this.config.videoSRC;
video.id = "VIDEO"
video.style.display = "none"
video.autoplay = true
 video.loop = this.config.loop
 container.appendChild(video)
 this.videoDom = video
 return container 
// Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
},
notificationReceived: function(noti, payload, sender) {
 if (noti == "DOM_OBJECT_CREATED") this.work()
//DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
},
work: function(src = null, interval = null) {
 clearTimer(this.timer)
 interval = (interval) ? interval : 30000
 src = (src) ? src : this.config.videoSRC
  this.playVideo(src)
  this.timer = setTimeout(()=>{
   this.work()
  }, interval)
//setTimeout is better than setInterval.
// you can repeat this function by interval. you can change interval and src with parameters of this function.
},
playVideo: function(src) {
this.videoDom.src = src
 if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
  this.videoDom.play()
  // assign src to your videoDom and play it.
},

});

I tried changing “interval” with actual numbers, as well as changing the source in multiple locations. Still just get a black screen.

[A Former User]

@dsmtweaker
Sorry there were another mistypes. DOM_OBJECT_CREATED => DOM_OBJECTS_CREATED (and clearTimer => clearTimeout)

use this. tested.

Module.register("test",{
  defaults: {
    videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
    loop: true,
    interval: 36000,
  },

  start: function() {
    this.timer = null
    this.videoDom = null
  },

  getDom: function() {
    var container =  document.createElement("div")
    var video = document.createElement("video")
    video.id = "VIDEO"
    video.style.display = "none"
    video.autoplay = true
    video.loop = this.config.loop
    container.appendChild(video)
    this.videoDom = video
    return container
  },
  notificationReceived: function(noti, payload, sender) {
    if (noti == "DOM_OBJECTS_CREATED") this.work()
  },
  work: function(src = null, interval = null) {
    clearTimeout(this.timer)
    interval = (interval) ? interval : this.config.interval
    src = (src) ? src : this.config.videoSRC
    this.playVideo(src)
    this.timer = setTimeout(()=>{
      this.work()
    }, interval)
  },
  playVideo: function(src) {
    this.videoDom.src = src
    if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
    this.videoDom.play()
  },
})

Anyway, your video is already repeating by loop: true, why you need to repeat it with timer?

[dsmtweaker]

@sean You are a genius, thank you so much.

Extra bonus, do you know of anyway to use a local source, instead of a web source?

IE- videoSRC: “/home/pi/content/videos/video1.mp4”

It’s not necessary, I just figured running something locally instead of from the web
would help reduce lag/buffer/tearing etc.

[dsmtweaker]

@sean said in Timer on Module:

Anyway, your video is already repeating by loop: true, why you need to repeat it with timer?

Because I don’t want it to loop. I want it to play in intervals. Like maybe every 15 minutes it runs the video(once)

[A Former User]

@dsmtweaker
If your local content locates under MagicMirror and it’s sub directory, you can contact via http.
~/MagicMirror/YOUR_RESOURCE => http://localhost:8080/YOUR_RESOURCE
~/MagicMirror/modules/MMM-SOMETHING/SOMEWHERE/SOME => http://localhost:8080/modules/MMM-SOMETHING/SOMEWHERE/SOME

But other location… hmmm I’m not sure whether symbolic_link would work. If not so, you need another approach. - more complex… just to move your content under MagicMirror would be simpler.