Controlling Embedded Youtube Video on MM

[zichao92]

@Jopyth , yea I’m using and modifying your remote module. Thanks for the tip, will try it out soon

[zichao92]

Hi @Jopyth ,

I looked through your code regarding generic notification request under your MMM remote. However, im not too sure how to incorporate the notification request into my modification. I tried replacing this.sendNotification("PAUSE_VIDEO", payload); with ?action=NOTIFICATION¬ification=PAUSE_VIDEO, however it doesnt work.

Can you assists me regarding this?

[Jopyth]

@zichao92 Try something like this:

var notification = "EXAMPLE";
var payload = "some payload, could be an object";
var encoded = encodeURIComponent(JSON.stringify(payload));
Remote.getWithStatus("action=NOTIFICATION&n"+"otification=" + notification + "&payload=" + encoded);

Edit: Added “+” to remove strange replacement with &not.

[zichao92]

@Jopyth ,

I tried that method to send a notification to the node_helper.js and from there, to broadcast the notification ‘PAUSE_VIDEO’ via sendNotifcation to another module with notificationReceived code at the receiving end.

However, I got an error stating that sendNotifcation as error reported as TypeError: this.sendNotification is not a function . Is there any work around to this?

[Jopyth]

@zichao92 You can not send notifications from the node_helper.js (they are running in the back end), they can only be send from the modules in the front end, i.e. MMM-Remote-Control.js.

Edit: Also the method I described above should already do all the forwarding of the nofification until it is broad cast to the other modules. Did you change anything in the other files?

Edit2: These are the lines which should make everything work: In the node_helper.js and in the MMM-Remote-Control.js.

[zichao92]

@Jopyth, I realized i was using an older version of your remote control. However, after updating the remote control module, i inserted your recommended line back into this code:

  // edit menu buttons
        "show-all-button": function() {
        var parent = document.getElementById("visible-modules-results");
        var buttons = parent.children;
        for (var i = 0; i < buttons.length; i++) {
         if (buttons[i].id!="module_5_youtube"){
            if (Remote.hasClass(buttons[i], "external-locked")) {
                continue;
            }
            buttons[i].className = buttons[i].className.replace("toggled-off", "toggled-on");
            Remote.showModule(buttons[i].id);
            var notification = "SCREEN_WAKEUP";
            Remote.getWithStatus("action=NOTIFICATION&n"+"otification=" + notification );
            }
        else{
                if (Remote.hasClass(buttons[i], "external-locked")) {
                continue;
            }
            buttons[i].className = buttons[i].className.replace("toggled-on", "toggled-off");
            Remote.hideModule(buttons[i].id);
                        }

I was testing this code with paviro’s PIR module ( https://github.com/paviro/MMM-PIR-Sensor) on this line which is found from his MMM-PIR-Sensor.js .

	notificationReceived: function(notification, payload) {
		if (notification === "SCREEN_WAKEUP"){
			this.sendNotification(notification, payload)
		}
	},

I modified the PIR code in such a way that when it receives the SCREEN_WAKEUP notification , it will perform certain actions for me rather than turning on the monitor.

[zichao92]

Hi all, im not too sure if i have made any mistake regarding the structure of MMM.

I placed my notificationReceived at the front end of embedded youtube, which i called it youtube.js( it doesnt have any node_helper) :

Here’s the code of my youtube.js , the codes are heavily based on a the default module called “compliments” :

module.register("youtube",{

	// Module config defaults.
	defaults: {

		updateInterval: 30000,
		fadeSpeed: 4000
	},



	// Define required scripts.
	getScripts: function() {
		return ["moment.js"];
//		exec("sudo python /home/pi/NicoRFID/RFID_playlist.py");
	},
	getStyles: function() {
	    return [
	        'script.css', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
	    ]
	},

	// Define start sequence.
	start: function() {
		Log.info("Starting module: " + this.name);

		
		// Schedule update timer.
		var self = this;
		setInterval(function() {
			self.updateDom(self.config.fadeSpeed);
		}, this.config.updateInterval);
	},
		

		
	/* randomIndex(compliments)
	 * Generate a random index for a list of compliments.
	 *
	 * argument compliments Array - Array with compliments.
	 *
	 * return Number - Random index.
	 */

	/* complimentArray()
	 * Retrieve an array of compliments for the time of the day.
	 *
	 * return compliments Array - Array with compliments for the time of the day.
	 */
	
	/* complimentArray()
	 * Retrieve a random compliment.
	 *
	 * return compliment string - A compliment.
	 */
		notificationReceived: function(notification, payload) {
		if (notification === "PAUSE_VIDEO"){
			pausethevideo()

		}
		else if (notification === "PLAY_VIDEO"){
			playthevideo()

		}
	},


	// Override dom generator.
	getDom: function() {
		//var complimentText = this.randomCompliment();
		//var complimentText = "Hi NUS GOD Puay Hiang ";

		//var compliment = document.createTextNode(complimentText);

		var wrapper = document.createElement("div");
		wrapper.className = "thin xlarge bright";

		function playthevideo(){
		var myPlayer = document.getElementById('my-video');
		myPlayer.playVideo();
		};

		function stopthevideo(){
		var myPlayer = document.getElementById('my-video');
		myPlayer.stopVideo();
		};

		function pausethevideo(){
		var myPlayer = document.getElementById('my-video'); 
		myPlayer.pauseVideo();
		};
		
		
		wrapper.innerHTML='<div> <div> allowfullscreen></div></div>';

		

		

			
		//wrapper.appendChild(compliment);

		return wrapper;
	}

});

So with the notificationReceived line, i intend to control my video using the remote control with these codes :

/ edit menu buttons
        "show-all-button": function() {
        var parent = document.getElementById("visible-modules-results");
        var buttons = parent.children;
        for (var i = 0; i < buttons.length; i++) {
         if (buttons[i].id!="module_5_youtube"){
            if (Remote.hasClass(buttons[i], "external-locked")) {
                continue;
            }
            buttons[i].className = buttons[i].className.replace("toggled-off", "toggled-on");
            Remote.showModule(buttons[i].id);
            var notification = "PAUSE_VIDEO";
            Remote.getWithStatus("action=NOTIFICATION&n"+"otification=" + notification );
            }
        else{
                if (Remote.hasClass(buttons[i], "external-locked")) {
                continue;
            }
            buttons[i].className = buttons[i].className.replace("toggled-on", "toggled-off");
            Remote.hideModule(buttons[i].id);
                        }

Am i doing something wrong here?

[zichao92]

@Jopyth ,

I managed to have some developments with your remote control module’s sendNotifcation command. I hooked up the MM using a browser and observed( using dev console, Note to beginners: press F12 on a browser to access this cool feature ) that a notification was send from MM Remote. This means that you were right all along, just that i didnt know how to observe the sendNotification command via dev console.

Currently, i have another issue. My youtube.js module receives the “PLAY_VIDEO” or “PAUSE_VIDEO” notification but is not able to perform what was desired.

Here’s my snippet of my code from my youtube.js :

notificationReceived: function(notification, payload) {
		if (notification === "PAUSE_VIDEO"){
			pausethevideo()

		}
		if (notification === "PLAY_VIDEO"){
			playthevideo()

		}
	},

getDom: function() {
var wrapper = document.createElement("div");
		wrapper.className = "thin xlarge bright";

		function playthevideo(){
		var myPlayer = document.getElementById('my-video');
		myPlayer.playVideo();
		};

		function stopthevideo(){
		var myPlayer = document.getElementById('my-video');
		myPlayer.stopVideo();
		};

		function pausethevideo(){
		var myPlayer = document.getElementById('my-video'); 
		myPlayer.pauseVideo();
		};
		
		
		wrapper.innerHTML='<div> <div> allowfullscreen></div></div>'; //youtube video link found here.

		

			return wrapper;
	}

});

However, i got an error from dev console :
Uncaught TypeError: Cannot read property 'pauseVideo' of null at Class.notificationReceived (youtube.js:69)

Im suspecting that my pauseVideo/playVideo function wasn’t recognised as it is getDom.

Will appreciate any help or advice !

[strawberry 3.141]

@zichao92 the access to those functions is limited to the getDom function.

you should put the definitions outside like

playthevideo: function() {
//do the stuff
}

and call the function like this.playthevideo()

[zichao92]

@strawberry-3.141 said in Controlling Embedded Youtube Video on MM:

playthevideo: function() {
//do the stuff
}

Hi there,

I tried your recommendation but i got this error Uncaught TypeError: Cannot read property 'playVideo' of null.
Which is coming from this code:

playthevideo: function() {
		var myPlayer = document.getElementById('my-video');
		myPlayer.playVideo();
		},

I suspect that the problem is that the above function is not being recognise as my embedded youtube codes still lies in the getDom function, which has the allowscriptaccess="awalys" that allows the user to control the video. I tried to extract out from the getDom function but i think my syntax is wrong. Here’s the full code of the youtube function that’s in the getDom function.

		wrapper.innerHTML='<div> <div>  //(youtube link here ) controls=0&showinfo=0&rel=0&autoplay=1" allowscriptaccess="always" name="my-video" frameborder="0" enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash"> allowfullscreen></div></div>';

[strawberry 3.141]

@zichao92 because there is no html element that has the id your looking for so var myPlayer = document.getElementById('my-video'); is null

[zichao92]

Hi @strawberry-3.141 ,
Thanks for the clarification!
I have added id = "my-vdieo" into my code, however, it produced another error :

Uncaught TypeError: myPlayer.playVideo is not a function
    at Class.playthevideo (youtube.js:69)

It’s not able to detect the function. After doing some readings about embedded YouTube videos, i came across this site :
https://developers.google.com/youtube/js_api_reference#onYouTubePlayerReady

It was mentioned that i require a callback function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

From there, I should be able to control my video. However, since this function can only be called in getDom function, im not too sure how it should work from here.

[strawberry 3.141]

@zichao92 do you have your code on github?

[zichao92]

Hi @strawberry-3.141 ,

I just uploaded to github ( not too sure if i have done it correctly , first time using github) but here you go.

https://github.com/zichao92/youtube/tree/Remote-

Edit 1: I’m still using an older version of Remote Control module by Jopyth, it’s more stable on my MagicMirror( less laggy etc). Im not too sure why though

[strawberry 3.141]

@zichao92 I cleaned up your module

Module.register("youtube",{

    start: function() {
        Log.info("Starting module: " + this.name);
    },

    getStyles: function() {
        return ['script.css'];
    },

    sendCommand: function(cmd){
        var myPlayer = document.getElementById('my-video');
        if(myPlayer){
            myPlayer.contentWindow.postMessage(JSON.stringify({
                "event": "command",
                "func": cmd
            }), "*");
        }
    },

    notificationReceived: function(notification, payload) {
        if (notification === "PAUSE_VIDEO"){
            this.sendCommand("pauseVideo");
        }
        if (notification === "PLAY_VIDEO"){
            this.sendCommand("playVideo");
        }
    },
    
    getDom: function() {

        var wrapper = document.createElement("div");

        var background = document.createElement("div");
        background.classList.add("video-background");

        var foreground = document.createElement("div");
        foreground.classList.add("video-foreground");

        var iframe = document.createElement("iframe");
        iframe.setAttribute("id", "my-video");
        iframe.setAttribute("src", "https://www.youtube.com/embed/5kIe6UZHSXw?enablejsapi=1&autoplay=1");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("type", "text/html");

        foreground.appendChild(iframe);
        background.appendChild(foreground);
        wrapper.appendChild(background);

        return wrapper;
    }
});

[zichao92]

@strawberry-3.141

OMG you are life saver. So the whole trick to my module is to use sendcommand instead?

[strawberry 3.141]

@zichao92 not only you had some more issues and sendCommand is a custom method

[pepebc]

These modules are very interesting.
Would it be possible to use voice command to manage pause and play of youtube?
Via notification?
Thank you

[E3V3A]

@strawberry-3.141 Funny how the youtube URL renders within the code tags! :)

[Mykle1]

@pepebc

I had this problem with my Alarm Clock MM and voice commands. Everything works perfectly until the alarm sounds. Now my voice command has to compete with the alarm that is playing. The success rate was pretty low and I was not happy with that. Setting a long enough pause in the alarm sound to issue a voice command seemed to work ok but I wasn’t happy with that either. In the end, I settled for making a clickable button appear when the alarm sounded.