From 838f11aa77495ffc38018910c39e99bdd020cab5 Mon Sep 17 00:00:00 2001
From: Jerry <isjerryxiao@outlook.com>
Date: Thu, 13 Jan 2022 13:27:15 +0800
Subject: [PATCH] add warning

---
 app/cyp.js     | 30 +++++++++++++++--
 app/index.html | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 3 deletions(-)

diff --git a/app/cyp.js b/app/cyp.js
index 8f93972..821f9e4 100644
--- a/app/cyp.js
+++ b/app/cyp.js
@@ -1110,7 +1110,15 @@ class Player extends Component {
 		const DOM = this._dom;
 
 		DOM.play.addEventListener("click", _ => this._app.mpd.command("play"));
-		DOM.pause.addEventListener("click", _ => this._app.mpd.command("pause 1"));
+		DOM.pause.addEventListener("click", _ => {
+			if (!this.multiuser_warned) {
+				this.multiuser_warned = true;
+				document.getElementById("warningpopup").style.display="block";
+			}
+			else {
+				this._app.mpd.command("pause 1");
+			}
+		});
 		DOM.prev.addEventListener("click", _ => this._app.mpd.command("previous"));
 		DOM.next.addEventListener("click", _ => this._app.mpd.command("next"));
 
@@ -1130,8 +1138,24 @@ class Player extends Component {
 			this._app.mpd.command(`seekcur ${elapsed}`);
 		});
 
-		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
-		DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggleVolume}`));
+		DOM.volume.addEventListener("input", e => {
+			if (!this.multiuser_warned) {
+				this.multiuser_warned = true;
+				document.getElementById("warningpopup").style.display="block";
+			}
+			else {
+				this._app.mpd.command(`setvol ${e.target.valueAsNumber}`);
+			}
+		});
+		DOM.mute.addEventListener("click", _ => {
+			if (!this.multiuser_warned) {
+				this.multiuser_warned = true;
+				document.getElementById("warningpopup").style.display="block";
+			}
+			else {
+				this._app.mpd.command(`setvol ${this._toggleVolume}`)
+			}
+		});
 	}
 
 	_dispatchSongChange(detail) {
diff --git a/app/index.html b/app/index.html
index ec16b4d..0d09bef 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,10 +5,100 @@
 		<meta name="viewport" content="width=device-width" />
 		<title>Control Your Player</title>
 		<link rel="stylesheet" href="cyp.css" />
+		<style>
+			/* Float cancel and delete buttons and add an equal width */
+			.popupbtn {
+				background-color: rgb(141, 0, 0);
+				color: rgb(255, 255, 255);
+				padding: 14px 20px;
+  			margin: 8px 0;
+				border: none;
+				cursor: pointer;
+				width: 100%;
+				opacity: 0.9;
+				display: block !important;
+				box-sizing: border-box;
+			}
+			.popupbtn:hover {
+				opacity:1;
+			}
+
+			/* Add padding and center-align text to the container */
+			.popupcontainer {
+				padding: 16px;
+				text-align: center;
+			}
+
+			/* The Modal (background) */
+			.popupmodal {
+				display: none; /* Hidden by default */
+				position: fixed; /* Stay in place */
+				z-index: 2; /* Sit on top */
+				left: 0;
+				top: 0;
+				width: 100%; /* Full width */
+				height: 100%; /* Full height */
+				overflow: auto; /* Enable scroll if needed */
+				background-color: #474e5d;
+				padding-top: 50px;
+			}
+
+			/* Modal Content/Box */
+			.popupmodal-content {
+				background-color: #fefefe;
+				margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+				border: 1px solid #888;
+				width: 80%; /* Could be more or less, depending on screen size */
+			}
+
+			/* Style the horizontal ruler */
+			.popup-hr {
+				border: 1px solid #f1f1f1;
+				margin-bottom: 25px;
+			}
+
+			/* The Modal Close Button (x) */
+			.popup-close {
+				position: absolute;
+				right: 35px;
+				top: 15px;
+				font-size: 40px;
+				font-weight: bold;
+				color: #f1f1f1;
+			}
+
+			.popup-close:hover,
+			.popup-close:focus {
+				color: #f44336;
+				cursor: pointer;
+			}
+
+			/* Clear floats */
+			.popup-clearfix::after {
+				content: "";
+				clear: both;
+				display: table;
+			}
+		</style>
 		<link rel="icon" href="https://emojimage.toad.cz/🎵" />
 		<meta name="mobile-web-app-capable" content="yes" />
 	</head>
 	<body>
+		<div id="warningpopup" class="popupmodal">
+			<span onclick="document.getElementById('warningpopup').style.display='none'" class="popup-close" title="x">×</span>
+			<div class="popupmodal-content">
+				<div class="popupcontainer">
+					<h2>Warning</h2>
+					<p>Be aware there may be other users listening to the same stream.</p>
+					<p>Pausing or changing volume on the server will affect them as well.</p>
+					<p>Please avoid server-side pausing or volume change if possible.</p>
+					<p>You can find client-side volume and pause control in the Settings Panel.</p>
+					<div class="popup-clearfix">
+						<button type="button" onclick="document.getElementById('warningpopup').style.display='none'" class="popupbtn">OK</button>
+					</div>
+				</div>
+			</div>
+		</div>
 		<cyp-app theme="dark" color="dodgerblue">
 		<header>
 			<cyp-player>