ラズパイでYouTube動画再生機能付き時計を作る方法【MagicMirror2使用】

git clone https://github.com/waveshare/Waveshare-DSI-LCD
cd Waveshare-DSI-LCD
cd 6.1.21
cd 64
sudo bash ./WS_xinchDSI_MAIN.sh 40C I2C0
sudo reboot

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

sudo apt install -y nodejs

git clone https://github.com/MichMich/MagicMirror

cd MagicMirror/

npm run install-mm

cp config/config.js.sample config/config.js

npm run start

cd MagicMirror/ && npm run start

let config = {
	address: "localhost",	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
									// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
									// or add a specific IPv4 of 192.168.1.5 :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "calendar",
			header: "US Holidays",
			position: "top_left",
			config: {
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
					}
				]
			}
		},
		{
			module: "compliments",
			position: "lower_third"
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				location: "New York",
				locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "YOUR_OPENWEATHER_API_KEY"
			}
		},
		{
			module: "weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				location: "New York",
				locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				apiKey: "YOUR_OPENWEATHER_API_KEY"
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
			}
		},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

cd ~/MagicMirror/modules
git clone https://github.com/nitpum/MMM-EmbedYoutube.git
cd MMM-EmbedYoutube
npm install

var config = {
    address: "0.0.0.0",
    port: 8080,
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],

    language: "ja",
    timeFormat: 24,
    units: "metric",

    modules: [
    		{
			module: "clock",
			position: "top_center",
            config: {
                showDate: false,
                displaySeconds: true, 
                },
		},
{
    module: 'MMM-EmbedYoutube', // Path to youtube module from modules folder Exmaple: MagicMirror/modules/custom/MMM-EmbedYoutube/ so it's custom/MMM-EmbedYoutube
    position: 'top_left', // This can be any of the regions.
    config: {
      // See 'Configuration options' in README.md for more information.
      video_id: 'R34ot1LETK0',
      loop: true,
      autoplay: true,
    },
  },
    ]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

/* Magic Mirror
 * Module: Embed Youtube
 * 
 * v 1.4.0
 * 
 * By Nitipoom Unrrom (aka nitpum) https://nitpum.com
 * MIT Licensed.
 */
Module.register("MMM-EmbedYoutube", {
	defaults: {
		autoplay: false,
		cc_load_policy: false,
		color: "red",
		controls : false,
		disablekb: false,
		fs: true,
		height: 900,
		width: 1300,
		loop: false,
		modestbranding: false,
		rel : false,
		showinfo : false,
		video_id : "",
		playlist: "",
		video_list: []
	},
	getDom: function () {
		var wrapper = document.createElement("div");

		// Parameter
		var params = "";

		var videoList = "";
		if (this.config.video_list && this.config.video_list.length > 0) {
			videoList = "&playlist=";
			for (var i = 0; i < this.config.video_list.length; i++) {
				videoList += this.config.video_list[i];
				if (i + 1 < this.config.video_list.length)
					videoList += ",";
			}
		}
		params += (this.config.autoplay) ? "autoplay=1" : "autoplay=0";
		params += (this.config.cc_load_policy) ? "&cc_load_policy=1" : "&cc_load_policy=0";
		params += (typeof this.config.color !== "undefined" && this.config.color != "red")? "&color=" + this.config.color:"";
		params += (this.config.controls)? "&controls=1":"&controls=0";
		params += (this.config.disablekb)? "&disablekb=1":"";
		params += (this.config.fs)? "":"&fs=0";
		params += (videoList != "" && (typeof this.config.playlist === "undefined" || this.config.playlist == "")) ? videoList : "&playlist=" + this.config.video_id; // required playlist to loopable
		params += (this.config.loop) ? "&loop=1" : "";
		params += (this.config.modestbranding) ? "&modestbranding=1" : "";
		params += (this.config.rel)? "&rel=1": "&rel=0";
		params += (this.config.showinfo)? "&showinfo=1": "&showinfo=0";

		var videoId = this.config.video_id +"?version=3";
		if (typeof this.config.playlist !== "undefined" && this.config.playlist != "")
			videoId = "playlist?list=" + this.config.playlist + "&";

		wrapper.innerHTML = "<iframe width=\"" + this.config.width +"\" height=\"" + this.config.height + "\" src=\"https://www.youtube.com/embed/" + videoId + "&"+ params +"\" frameborder=\"0\" allowfullscreen></iframe>";
		return wrapper;
	}
});

touch /home/pi/MagicMirror/css/custom.css

nano /home/pi/MagicMirror/css/custom.css

.MMM-EmbedYoutube {
  margin-left: -370px;    
  margin-top: -150px;
}

Module.register("MMM-EmbedYoutube", {
    defaults: {
        autoplay: false,
        cc_load_policy: false,
        color: "red",
        controls: false,
        disablekb: false,
        fs: true,
        height: 900,
        width: 1300,
        loop: false,
        modestbranding: false,
        rel: false,
        showinfo: false,
        video_id: "",
        playlist: "",
        video_list: [],
        videoRotationList: "", // 動画IDのリスト
        rotationInterval: 60000, // 1分おきに動画を切り替える
    },

    start: function() {
        this.currentVideoIndex = 0; // 現在の動画インデックス
        this.updateVideo(); // 最初の動画を設定
        this.scheduleUpdate(); // 動画更新スケジュールを設定
    },

    scheduleUpdate: function() {
        var self = this;
        setInterval(function() {
            self.updateVideo();
        }, this.config.rotationInterval);
    },

    updateVideo: function() {
        if (this.config.videoRotationList.length > 0) {
            this.config.video_id = this.config.videoRotationList[this.currentVideoIndex];
            this.currentVideoIndex += 1;
            if (this.currentVideoIndex >= this.config.videoRotationList.length) {
                this.currentVideoIndex = 0; // リストの最初に戻る
            }
            this.updateDom();
        }
    },

    getDom: function() {
        var wrapper = document.createElement("div");

        // Parameter
        var params = "";

        var videoList = "";
        if (this.config.video_list && this.config.video_list.length > 0) {
            videoList = "&playlist=";
            for (var i = 0; i < this.config.video_list.length; i++) {
                videoList += this.config.video_list[i];
                if (i + 1 < this.config.video_list.length) videoList += ",";
            }
        }
        params += (this.config.autoplay) ? "autoplay=1" : "autoplay=0";
        params += (this.config.cc_load_policy) ? "&cc_load_policy=1" : "&cc_load_policy=0";
        params += (typeof this.config.color !== "undefined" && this.config.color != "red") ? "&color=" + this.config.color : "";
        params += (this.config.controls) ? "&controls=1" : "&controls=0";
        params += (this.config.disablekb) ? "&disablekb=1" : "";
        params += (this.config.fs) ? "" : "&fs=0";
        params += (videoList != "" && (typeof this.config.playlist === "undefined" || this.config.playlist == "")) ? videoList : "&playlist=" + this.config.video_id;
        params += (this.config.loop) ? "&loop=1" : "";
        params += (this.config.modestbranding) ? "&modestbranding=1" : "";
        params += (this.config.rel) ? "&rel=1" : "&rel=0";
        params += (this.config.showinfo) ? "&showinfo=1" : "&showinfo=0";

        var videoId = this.config.video_id + "?version=3";
        if (typeof this.config.playlist !== "undefined" && this.config.playlist != "")
            videoId = "playlist?list=" + this.config.playlist + "&";

        wrapper.innerHTML = "<iframe width=\"" + this.config.width + "\" height=\"" + this.config.height + "\" src=\"https://www.youtube.com/embed/" + videoId + "&" + params + "\" frameborder=\"0\" allowfullscreen></iframe>";
        return wrapper;
    }
});

var config = {
    address: "0.0.0.0",
    port: 8080,
    ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],

    language: "ja",
    timeFormat: 24,
    units: "metric",

    modules: [
    		{
			module: "clock",
			position: "top_center",
            config: {
                showDate: false,
                displaySeconds: true 
                },
		},
        
{
    module: 'MMM-EmbedYoutube', // Path to youtube module from modules folder Exmaple: MagicMirror/modules/custom/MMM-EmbedYoutube/ so it's custom/MMM-EmbedYoutube
    position: 'top_left', // This can be any of the regions.
    config: {
      // See 'Configuration options' in README.md for more information.
      videoRotationList: ['dkLjO4TE634', 'O52zDyxg5QI'],
      rotationInterval: 60000, // 1分おきに動画を切り替える
      loop: true,
      autoplay: true,
    },
  },
    ]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }