Merge pull request owncloud#1172 from paulijar/feature/dashboard_widget

Nextcloud Dashboard widget

CHANGELOG.md

@@ -1,3 +1,20 @@
+## [Unreleased]
+
+### Added
+- Dashboard widget for Nextcloud
+  [#1172](https://github.com/owncloud/music/pull/1172)
+
+### Changed
+- Ampache API:
+  * Action `get_indexes` supports also `type=song_artist`
+  * Added fields `art` and `has_art` to the `podcast_episode` and `live_stream` result types
+  * For radio stations without user-supplied name, use the stream URL as a name
+
+### Fixed
+- Ampache API:
+  * Action `playlist_songs` returning internal error 500 if the playlist contains any broken track references
+- Song progress shown incorrectly in the media session integration of Chrome when playing (exotic file types) with the fallback Aurora.js player
+
 ## 2.0.1 - 2024-09-08
 
 ### Added

css/dashboard/dashboard-music-icons.css

@@ -0,0 +1,43 @@
+
+/**
+ * ownCloud - Music app
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Pauli Järvinen <[email protected]>
+ * @copyright Pauli Järvinen 2024
+ */
+
+.icon-music-app {
+	background-image: url(../../img/music-dark.svg);
+	filter: var(--background-invert-if-dark);
+}
+
+.music-widget .icon-play {
+	background-image: url(../../img/play-big.svg);
+}
+
+.music-widget .icon-pause {
+	background-image: url(../../img/pause-big.svg);
+}
+
+.music-widget .icon-stop {
+	background-image: url(../../img/stop.svg);
+}
+
+.music-widget .icon-skip-prev {
+	background-image: url(../../img/skip-previous.svg);
+}
+
+.music-widget .icon-skip-next {
+	background-image: url(../../img/skip-next.svg);
+}
+
+.music-widget .icon-shuffle {
+	background-image: url(../../img/shuffle.svg);
+}
+
+.music-widget .icon-repeat {
+	background-image: url(../../img/repeat.svg);
+}

css/dashboard/dashboard-music-widget.css

@@ -0,0 +1,160 @@
+/**
+ * ownCloud - Music app
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Pauli Järvinen <[email protected]>
+ * @copyright Pauli Järvinen 2024
+ */
+
+.music-widget {
+	height: 100%;
+	display: flex;
+	flex-flow: column;
+}
+
+.music-widget .select-container {
+	flex: 0 1 auto;
+}
+
+.music-widget .tracks-container {
+	flex: 1 1 auto;
+	overflow-y: scroll;
+	scrollbar-width: thin;
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.music-widget .progress-and-order {
+	flex: 0 0 25px;
+	display: flex;
+	flex-flow: row;
+}
+
+.music-widget .progress-and-order .control {
+	flex: 0 0 40px;
+	margin-top: -10px;
+}
+
+.music-widget .progress-and-order .music-progress-info {
+	flex: 1 1 auto;
+	position: relative;
+}
+
+.music-widget .progress-and-order .music-progress-info span {
+	line-height: unset;
+}
+
+.music-widget .progress-and-order .music-progress-info .progress-text {
+	line-height: 100%;
+	position: absolute;
+	color: black;
+	top: 0;
+	bottom: auto;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.music-widget .current-song-label {
+	flex: 0 0 25px;
+	margin-left: 8px;
+	margin-right: 8px;
+	margin-top: -5px;
+	text-align: center;
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.music-widget .player-controls {
+	flex: 0 0 50px;
+	display: flex;
+	flex-flow: row;
+}
+
+.music-widget .player-controls .albumart {
+	width: 50px;
+	height: 50px;
+	border: 1px solid var(--color-text-lighter);
+	margin-left: 8px;
+	margin-right: 16px;
+	background-size: contain;
+	cursor: pointer;
+}
+
+.music-widget .player-controls .control {
+	background-size: contain;
+	margin: 9px;
+}
+
+.music-widget .player-controls .playback.control {
+	width: 32px;
+	height: 32px;
+}
+
+.music-widget .player-controls .music-volume-control {
+	position: relative;
+}
+
+.music-widget .player-controls .music-volume-control .volume-icon {
+	left: 10px;
+	top: 4px;
+}
+
+.music-widget .player-controls .music-volume-control .volume-slider {
+	width: 50px;
+	top: 24px;
+	left: 30px
+}
+
+.music-widget select {
+	width: 100%;
+}
+
+.music-widget select:invalid {
+	color: var(--color-text-lighter);
+}
+
+.music-widget select option {
+	color: var(--color-main-text);
+}
+
+.music-widget li {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-left: 12px;
+	padding-right: 12px;
+	line-height: 28px;
+	border-radius: var(--border-radius-large);
+	cursor: pointer;
+}
+
+.music-widget li * {
+	cursor: pointer;
+}
+
+.music-widget li:hover,
+.music-widget li.current {
+	transition: background-color 0.3s ease;
+	background-color: var(--color-background-hover);
+}
+
+.music-widget .dimmed {
+	opacity: .5;
+}
+
+.music-widget .control {
+	cursor: pointer;
+	opacity: .5;
+	filter: var(--background-invert-if-dark);
+}
+
+.music-widget .control:hover,
+.music-widget .control.toggle.active {
+	opacity: 1;
+}

css/embedded/files-music-mobile-tablet.css

@@ -38,15 +38,15 @@
 	left: 160px;
 	right: 50px;
 }
-#music-controls.mobile .volume-control {
+#music-controls.mobile .music-volume-control {
 	display: none;
 }
 
 /* "Extra narrow" style */
 #music-controls.extra-narrow #song-info {
 	width: 100%;
 }
-#music-controls.extra-narrow .progress-info {
+#music-controls.extra-narrow .music-progress-info {
 	display: none;
 }
 

css/embedded/files-music-player.css

@@ -182,46 +182,12 @@
 	line-height: 29px;
 }
 
-#music-controls .progress-info {
+#music-controls .music-progress-info {
 	width: 45%;
-	text-align: center;
 	margin: 0 auto 25px auto;
-	overflow: hidden;
-}
-
-#music-controls .progress-info span {
-	line-height: 30px;
 }
 
-#music-controls .seek-bar {
-	width: 100%;
-	height: 15px;
-	margin: 0 auto 0 auto;
-	position: relative;
-	background-color: #eee;
-}
-
-#music-controls .seek-bar, #music-controls .play-bar, #music-controls .buffer-bar {
-	display: block;
-}
-
-#music-controls .play-bar, #music-controls .buffer-bar {
+#music-controls .music-volume-control {
 	position: absolute;
-	left: 0;
-	top: 0;
-	height: 15px;
-	width: 0%;
-	background-color: var(--color-primary, #1d2d44);
-}
-
-.ie #music-controls .play-bar, #music-controls .buffer-bar {
-	background-color: #1d2d44;
-}
-
-#music-controls .translucent {
-	opacity: 0.75;
-}
-
-#music-controls .buffer-bar {
-	opacity: 0.1;
+	right: 120px;
 }

css/shared/music-progress-info.css

@@ -0,0 +1,51 @@
+/**
+ * ownCloud - Music app
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Pauli Järvinen <[email protected]>
+ * @copyright Pauli Järvinen 2024
+ */
+
+.music-progress-info {
+	text-align: center;
+	overflow: hidden;
+}
+
+.music-progress-info span {
+	line-height: 30px;
+}
+
+.music-progress-info .seek-bar {
+	width: 100%;
+	height: 15px;
+	margin: 0 auto 0 auto;
+	position: relative;
+	background-color: #eee;
+}
+
+.music-progress-info .seek-bar, .music-progress-info .play-bar, .music-progress-info .buffer-bar {
+	display: block;
+}
+
+.music-progress-info .play-bar, .music-progress-info .buffer-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15px;
+	width: 0%;
+	background-color: var(--color-primary, #1d2d44);
+}
+
+.ie .music-progress-info .play-bar, .ie .music-progress-info .buffer-bar {
+	background-color: #1d2d44;
+}
+
+.music-progress-info .translucent {
+	opacity: 0.75;
+}
+
+.music-progress-info .buffer-bar {
+	opacity: 0.1;
+}