Timer on Module

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.