Merge pull request #1006 from Root-Core/speed-rightclick

Enabled playback speed context menu via right click
owncloud · Aug 23, 2022 · be5084b · be5084b
2 parents 72e1350 + 04937bc
commit be5084b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/js/app/controllers/playercontroller.js b/js/app/controllers/playercontroller.js
@@ -413,15 +413,15 @@ function ($scope, $rootScope, playlistService, Audio, gettextCatalog, Restangula
 		$scope.playbackRate = stepRates[nextStep];
 	};
 
-	/** Context menu on long press of the play/pause button */
-	document.getElementById('play-pause-button').addEventListener('long-press', function(e) {
+	// Show context menu on long press of the play/pause button
+	$scope.playbackBtnLongPress = function($event) {
 		// 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();
+			$event.preventDefault();
 		}
 
 		// 50 ms haptic feedback for touch devices
@@ -430,7 +430,12 @@ function ($scope, $rootScope, playlistService, Audio, gettextCatalog, Restangula
 		}
 
 		$timeout(() => $scope.playPauseContextMenuVisible = true);
-	});
+	};
+	// Show context menu on right click of play/pause button, surpress the browser context menu
+	$scope.playbackBtnContextMenu = function($event) {
+		$event.preventDefault();
+		$timeout(() => $scope.playPauseContextMenuVisible = true);
+	};
 	// hide the popup menu when the user clicks anywhere on the page
 	$document.click(function(_event) {
 		$timeout(() => $scope.playPauseContextMenuVisible = false);

diff --git a/templates/partials/controls.php b/templates/partials/controls.php
@@ -5,7 +5,10 @@
 		<img ng-click="prev()" class="control small svg" alt="{{ 'Previous' | translate }}"
 			src="<?php HtmlUtil::printSvgPath('skip-previous') ?>" />
 		<div id="play-pause-container" ng-show="!shiftHeldDown">
-			<div id="play-pause-button" ng-click="togglePlayback()"
+			<div id="play-pause-button"
+				ng-click="togglePlayback()"
+				ng-on-contextmenu="playbackBtnContextMenu($event)"
+				ng-on-long-press="playbackBtnLongPress($event)"
 				ng-class="playing ? 'icon-pause-big' : 'icon-play-big'" class="control svg"
 				alt="{{ playing ? ('Pause' | translate) : ('Play' | translate) }}"
 				title="{{ 'press and hold for more' | translate }}" data-long-press-delay="1000">