Still converting to bootstrap 5. Updated media player

approot/mediaplayer.xml

@@ -6,36 +6,35 @@
 	<audio id="lms-mp-audio">
 	</audio>
 	<div class="container">
-		<div class="Lms-player-seek-container">
+		<div class="p-1 my-1 position-relative">
 			<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
-			<div class="progress Lms-player-seek-common Lms-player-progress">
+			<div class="progress Lms-player-seek-common bg-secondary rounded">
-				<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+				<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
-				</div>
 			</div>
 		</div>
 
-		<div class="row">
+		<div class="d-flex align-items-center">
-			<div class="col-xs-5 col-sm-3 col-md-2 Lms-player-controls">
+			<div class="d-inline-flex me-2">
-				<i id="lms-mp-previous" class="fa fa-fw fa-step-backward Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-playpause" class="fa fa-fw fa-play Lms-player-btn Lms-btn Lms-player-btn-controls"></i><i id="lms-mp-next" class="fa fa-fw fa-step-forward Lms-player-btn Lms-btn Lms-player-btn-controls"></i>
+				<button id="lms-mp-previous" class="btn btn-outline-primary border-0 d-none d-sm-block">
+					<i class="fa fa-fw fa-step-backward"/>
+				</button>
+				<button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
+					<i class="fa fa-fw fa-play"/>
+				</button>
+				<button id="lms-mp-next" class="btn btn-outline-primary border-0">
+					<i class="fa fa-fw fa-step-forward"/>
+				</button>
 			</div>
-			<div class="hidden-xs hidden-sm col-md-2">
+			<div class="d-none d-md-block">
-				<div class="Lms-player-volume">
+				<i id="lms-mp-volume" class="fa fa-fw fa-volume-up"></i>
-					<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-btn Lms-player-btn-volume"></i>
+				<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8"/>
-					<span class="Lms-player-volume-slider-container">
-						<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
-					</span>
-				</div>
 			</div>
-			<div class="col-xs-7 col-sm-7 col-md-6">
+			<div class="flex-fill text-center text-truncate">
-				<div class="Lms-player-text-center">
+				${title class="d-block text-truncate"}
-					${title class="Lms-player-text Lms-trackname text-primary"}
+				${release class="text-decoration-none text-truncate link-success"}
-				</div>
-				<div class="Lms-player-text-center">
-					${release class="Lms-btn Lms-player-text Lms-releasename text-primary"}<span class="hidden-xs"><small>${artist class="Lms-btn Lms-player-text Lms-artistname text-muted"}</small></span>
-				</div>
 			</div>
-			<div class="hidden-xs col-sm-2 col-md-2 Lms-player-duration text-muted">
+			<div class="d-none d-sm-block text-muted text-nowrap">
-				<span id="lms-transcoding-active" class="Lms-player-btn Lms-btn" data-toggle="tooltip" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
+				<span id="lms-transcoding-active" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
 				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
 			</div>
 		</div>

approot/playqueue.xml

@@ -9,17 +9,17 @@
 
 <message id="Lms.PlayQueue.template">
 	<div class="mb-3">
-		<div class="d-inline-block me-2" data-toggle="tooltip" title="${tr:Lms.PlayQueue.clear}">
+		<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.clear}">
 			${clear-btn class="btn btn-secondary"}
 		</div>
-		<div class="d-inline-block me-2" data-toggle="tooltip" title="${tr:Lms.PlayQueue.shuffle}">
+		<div class="d-inline-block me-2" title="${tr:Lms.PlayQueue.shuffle}">
 			${shuffle-btn class="btn btn-secondary"}
 		</div>
 		<div class="btn-group me-2">
 			${repeat-btn class="btn-check"}
-			<label class="btn btn-outline-info" data-toggle="tooltip" title="${tr:Lms.PlayQueue.repeat}" for="${id:repeat-btn}">${tr:Lms.PlayQueue.template.repeat-btn}</label>
+			<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.repeat}" for="${id:repeat-btn}">${tr:Lms.PlayQueue.template.repeat-btn}</label>
 			${radio-btn class="btn-check"}
-			<label class="btn btn-outline-info" data-toggle="tooltip" title="${tr:Lms.PlayQueue.radio-mode}" for="${id:radio-btn}">${tr:Lms.PlayQueue.template.radio-btn}</label>
+			<label class="btn btn-outline-info" title="${tr:Lms.PlayQueue.radio-mode}" for="${id:radio-btn}">${tr:Lms.PlayQueue.template.radio-btn}</label>
 		</div>
 		${nb-tracks}
 	</div>

approot/settings.xml

@@ -149,7 +149,7 @@
 		</div>
 		${</if-has-old-password>}
 		<div class="col-lg-6">
-			<label class="col-lg-3 control-label" for="${id:password}">
+			<label class="form-label" for="${id:password}">
 				${tr:Lms.password-new}
 			</label>
 			${password class="form-control"}
@@ -158,7 +158,7 @@
 			</div>
 		</div>
 		<div class="col-lg-6">
-			<label class="col-lg-3 control-label" for="${id:password-confirm}">
+			<label class="form-label" for="${id:password-confirm}">
 				${tr:Lms.password-confirm}
 			</label>
 			${password-confirm class="form-control"}

docroot/css/lms.css

@@ -1,4 +1,17 @@
 /* Generic rules */
+
+.link-success {
+	transition: color 0.15s ease;
+}
+
+.link-secondary {
+	transition: color 0.15s ease;
+}
+
+.Lms-bg-dark-hover {
+	transition: background-color 0.15s ease;
+}
+
 .Lms-bg-dark-hover:hover {
 	background-color: var(--bs-dark);
 }
@@ -8,8 +21,9 @@ body {
 	padding-bottom: 78px;
 }
 
-a img:hover {
+.Lms-badge-cluster {
-	filter: brightness(85%);
+	transition: filter 0.15s ease;
+	cursor: pointer;
 }
 
 .Lms-badge-cluster:hover {
@@ -29,7 +43,11 @@ a img:hover {
 
 .Lms-cover {
 	opacity: 0;
-	transition: opacity 1s;
+	transition: opacity 0.5s ease-in, filter 0.15s ease;
+}
+
+.Lms-cover-anchor:hover {
+	filter: brightness(85%);
 }
 
 .Lms-cover-container {
@@ -66,6 +84,37 @@ a img:hover {
 	z-index: 999;
 }
 
+.Lms-player-seek-common {
+	position: absolute;
+	width:100%;
+	top: 0;
+	left: 0;
+	height: 6px;
+}
+
+.Lms-player-seek {
+	cursor: pointer;
+	z-index: 1;
+	touch-action: manipulation;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: transparent;
+}
+
+.Lms-player-seek::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	height: 0;
+	width: 0;
+}
+
+.Lms-player-seek::-moz-range-thumb {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	height: 0;
+	width: 0;
+}
+
 
 .Lms-responsive-square {
 	width: 100%;

docroot/js/mediaplayer.js

@@ -31,13 +31,16 @@ LMS.mediaplayer = function () {
 	var _lastStartPlaying = null;
 
 	var _updateControls = function() {
+		const pauseClass = "fa-pause";
+		const playClass = "fa-play";
+
 		if (_elems.audio.paused) {
-			_elems.playpause.classList.remove("fa-pause");
+			_elems.playpause.firstElementChild.classList.remove(pauseClass);
-			_elems.playpause.classList.add("fa-play");
+			_elems.playpause.firstElementChild.classList.add(playClass);
 		}
 		else {
-			_elems.playpause.classList.remove("fa-play");
+			_elems.playpause.firstElementChild.classList.remove(playClass);
-			_elems.playpause.classList.add("fa-pause");
+			_elems.playpause.firstElementChild.classList.add(pauseClass);
 		}
 	}
 
@@ -178,8 +181,6 @@ LMS.mediaplayer = function () {
 		_elems.volumeslider = document.getElementById("lms-mp-volume-slider");
 		_elems.transcodingActive = document.getElementById("lms-transcoding-active");
 
-		$(_elems.transcodingActive).tooltip();
-
 		var source = _audioCtx.createMediaElementSource(_elems.audio);
 		source.connect(_gainNode);
 		_gainNode.connect(_audioCtx.destination);

src/lms/ui/LmsApplication.cpp

@@ -415,13 +415,13 @@ LmsApplication::createHome()
 	_coverResource = std::make_shared<CoverResource>();
 
 	declareJavaScriptFunction("onLoadCover", "function(id) { id.className += \" Lms-cover-loaded\"}");
-	doJavaScript("$('body').tooltip({ selector: '[data-toggle=\"tooltip\"]'})");
 
 	Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.main.template")))};
 
 	main->addFunction("tr", &Wt::WTemplate::Functions::tr);
 
 	Wt::WTemplate* navbar {main->bindNew<Wt::WTemplate>("navbar", Wt::WString::tr("Lms.main.template.navbar"))};
+	navbar->addFunction("tr", &Wt::WTemplate::Functions::tr);
 
 	_notificationContainer = main->bindNew<NotificationContainer>("notifications");
 	_modalManager = main->bindNew<ModalManager>("modal");

src/lms/ui/PlayQueue.cpp

@@ -408,7 +408,7 @@ PlayQueue::addEntry(const Database::TrackListEntry::pointer& tracklistEntry)
 		{
 			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
 			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Small)};
-			cover->addStyleClass("Lms-cover-track"); // HACK
+			cover->addStyleClass("Lms-cover-track Lms-cover-anchor"); // HACK
 			anchor->setImage(std::move(cover));
 		}
 	}

src/lms/ui/explore/ReleaseListHelpers.cpp

@@ -45,7 +45,7 @@ namespace UserInterface::ReleaseListHelpers
 		{
 			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
 			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Large)};
-			cover->addStyleClass("Lms-cover-release");
+			cover->addStyleClass("Lms-cover-release Lms-cover-anchor");
 			anchor->setImage(std::move(cover));
 		}
 

src/lms/ui/explore/TrackListHelpers.cpp

@@ -62,7 +62,7 @@ namespace UserInterface::TrackListHelpers
 			entry->bindWidget("release", LmsApplication::createReleaseAnchor(track->getRelease()));
 			Wt::WAnchor* anchor {entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false))};
 			auto cover {Utils::createCover(release->getId(), CoverResource::Size::Small)};
-			cover->addStyleClass("Lms-cover-track"); // HACK
+			cover->addStyleClass("Lms-cover-track Lms-cover-anchor"); // HACK
 			anchor->setImage(std::move((cover)));
 		}
 		else