Stop button shown with long press on the play/pause button

Long press on the play/pause button in the controls pane now shows a context
menu with the option "Stop". This is especially to enable stopping on
touch-only devices which have no HW media control keys or the shift button to
use keyboard shortcut.

On touch devices supporting it, there is also a small haptic feedback given
when the context menu opens. It helps to notice that the menu has opened as
the menu itself is often hidden by the user's finger. This seems to currently
work at least on Chrome for Android but not on Firefox for Android.

refs #911

CHANGELOG.md

@@ -4,6 +4,8 @@
   [#912](https://github.com/owncloud/music/pull/912) @PVince81
 - Option `rescan-modified` to the `occ` command `music:scan`
   [#843](https://github.com/owncloud/music/issues/843)
+- Stop button shown with long press on the play/pause button
+  [#911](https://github.com/owncloud/music/issues/911)
 
 ## 1.4.1 - 2021-10-31
 ### Added

build/package.json

@@ -22,6 +22,7 @@
 		"jquery": "^3.6.0",
 		"js-cookie": "^2.2.1",
 		"lodash": "^4.17.21",
+		"long-press-event": "^2.4.4",
 		"restangular": "^1.6.1"
 	},
 	"devDependencies": {

css/style-controls.css

@@ -7,15 +7,15 @@
  * @author Morris Jobke <hey@morrisjobke.de>
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
  * @copyright Morris Jobke 2013, 2014
- * @copyright Pauli Järvinen 2017 - 2020
+ * @copyright Pauli Järvinen 2017 - 2021
  */
 
 #controls {
 	height: 66px;
 	padding: 0 20px 0 20px;
 	top: 45px;
 	position: fixed;
-	overflow: hidden;
+	overflow: visible;
 }
 
 /* Rule used when collapsible navigation pane is open. In that case, #app-content is transformed
@@ -46,14 +46,19 @@ body:not(.snapjs-left) #controls.taller-header {
 }
 
 .control {
-	height: 52px;
-	width: 52px;
+	background-size: contain;
+	height: 32px;
+	width: 32px;
 	padding: 10px;
-	margin: 9px 2px 5px;
+	margin: 0 12px 15px;
 	cursor: pointer;
 	opacity: .4;
 }
 
+#play-pause-container {
+	position: relative;
+}
+
 #play-controls {
 	height: 66px;
 	margin-left: 40px;
@@ -69,6 +74,12 @@ body:not(.snapjs-left) #controls.taller-header {
 	opacity: 1;
 }
 
+#controls #play-pause-menu,
+#controls #play-pause-menu::after /* the carret */ {
+	transform: translateX(50%);
+	right: 50% ;
+}
+
 #controls .albumart {
 	position: relative;
 	height: 50px;
@@ -219,3 +230,15 @@ body:not(.snapjs-left) #controls.taller-header {
 :hover::-moz-range-thumb {
 	cursor: pointer;
 }
+
+.icon-play-big {
+	background-image: url(../img/play-big.svg);
+}
+
+.icon-pause-big {
+	background-image: url(../img/pause-big.svg);
+}
+
+.icon-stop {
+	background-image: url(../img/stop.svg);
+}

css/style-dark-theme.css

@@ -45,3 +45,7 @@
 .dark-theme .icon-reload {
 	background-image: url(../img/reload-inverted.svg);
 }
+
+.dark-theme .icon-stop {
+	background-image: url(../img/stop-white.svg);
+}

js/app/controllers/playercontroller.js

@@ -259,6 +259,29 @@ function ($scope, $rootScope, playlistService, Audio, gettextCatalog, Restangula
 		playlistService.clearPlaylist();
 	};
 
+	/** Context menu on long press of the play/pause button */
+	document.getElementById('play-pause-button').addEventListener('long-press', function(e) {
+		// We don't want the normal click event after the long press has been handled. However, preventing it seems to 
+		// be implicit on touch devices (for reason unknown) and calling preventDefault() there would trigger the bug
+		// https://github.com/john-doherty/long-press-event/issues/27.
+		// The following is a bit hacky work-around for this.
+		const isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+		if (!isTouch) {
+			e.preventDefault();
+		}
+
+		// 50 ms haptic feedback for touch devices
+		if ('vibrate' in navigator) {
+			navigator.vibrate(50);
+		}
+
+		$timeout(() => $scope.playPauseContextMenuVisible = true);
+	});
+	// hide the popup menu when the user clicks anywhere on the page
+	$document.click(function(_event) {
+		$timeout(() => $scope.playPauseContextMenuVisible = false);
+	});
+
 	$scope.next = function(startOffset /*optional*/) {
 		var entry = playlistService.jumpToNextTrack();
 

js/index.app.js

@@ -26,16 +26,17 @@ require('node_modules/angular-gettext');
 require('node_modules/angular-route');
 require('node_modules/angular-sanitize');
 require('node_modules/angular-scroll');
+require('node_modules/javascript-detect-element-resize/jquery.resize.js');
+require('node_modules/long-press-event');
+require('node_modules/restangular');
 require('vendor/aurora/flac.js');
 require('vendor/aurora/mp3.js');
 require('vendor/dragdrop/draganddrop.js');
-require('node_modules/javascript-detect-element-resize/jquery.resize.js');
+require('vendor/nextcloud/placeholder.js');
 // jquery.initialize can't be initialized on a browser lacking the MutationObserver like IE10
 if (typeof MutationObserver !== 'undefined') {
 	require('vendor/jquery-initialize');
 }
-require('vendor/nextcloud/placeholder.js');
-require('node_modules/restangular');
 
 /* Music app files */
 requireAll(require.context('./app', /*use subdirectories:*/ true));

templates/fake-template.php

@@ -20,3 +20,7 @@
 <!--  localizations for the Folders view -->
 <span translate>Music library</span>
 <span translate>(library root)</span>
+
+<!-- localizations fr the player controls pane -->
+<span translate>Play</span>
+<span translate>Pause</span>

templates/partials/controls.php

@@ -4,10 +4,19 @@
 	<div id="play-controls">
 		<img ng-click="prev()" class="control small svg" alt="{{ 'Previous' | translate }}"
 			src="<?php HtmlUtil::printSvgPath('skip-previous') ?>" />
-		<img ng-click="play()" ng-hide="playing" class="control svg" alt="{{ 'Play' | translate }}"
-			src="<?php HtmlUtil::printSvgPath('play-big') ?>" />
-		<img ng-click="pause()" ng-show="playing" class="control svg" alt="{{ 'Pause' | translate }}"
-			src="<?php HtmlUtil::printSvgPath('pause-big') ?>" />
+		<div id="play-pause-container" ng-click="togglePlayback()">
+			<div ng-class="playing ? 'icon-pause-big' : 'icon-play-big'" class="control svg"
+				alt="{{ playing ? ('Pause' | translate) : ('Play' | translate) }}" id="play-pause-button"
+				title="{{ 'press and hold for more' | translate }}" data-long-press-delay="1000">
+			</div>
+			<div id="play-pause-menu" class="popovermenu bubble" ng-show="playPauseContextMenuVisible">
+				<ul>
+					<li ng-click="stop()">
+						<a class="icon-stop"><span translate>Stop</span></a>
+					</li>
+				</ul>
+			</div>
+		</div>
 		<img ng-click="next()" class="control small svg" alt="{{ 'Next' | translate }}"
 			src="<?php HtmlUtil::printSvgPath('skip-next') ?>" />
 	</div>