Skip to content

Commit

Permalink
Merge pull request #446 from kagemomiji/issue305-refactored-media-mai…
Browse files Browse the repository at this point in the history 
…n-ui

#305 refactored media main UI
  • Loading branch information
@kagemomiji
kagemomiji committed May 4, 2024
2 parents 0186582 + 4925492 commit 6ce116a
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 44 deletions.
13 changes: 13 additions & 0 deletions airsonic-main/src/main/resources/static/script/feather-4.29.2.min.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions airsonic-main/src/main/resources/static/script/feather-4.29.2.min.js.map
View file

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions airsonic-main/src/main/resources/static/style/default-without-mediaelement.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -563,3 +563,33 @@ img {
#zoom_img { display: block; cursor: pointer; width: 100%; border: 0; margin: 0; padding: 0; }
#zoom_close { position: absolute; display: none; cursor: pointer; left: -15px; top: -15px; width: 30px; height: 30px; background: url(../script/closebox.png) no-repeat; }
#zoom_spin { position: absolute; display: none; z-index: 525; width: 50px; height: 50px; background: url(../script/spin.png) no-repeat; }

/* Feather icons */
.feather {
vertical-align: middle;
width: 24px;
height: 24px;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}

.feather-filled {
fill: currentColor;
}

.feather-xs {
width: 12px;
height: 12px;
}

.feather-sm {
width: 16px;
height: 16px;
}

.feather-lg {
width: 32px;
height: 32px;
}
1 change: 1 addition & 0 deletions airsonic-main/src/main/resources/templates/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
</script>
<script defer type="text/javascript" th:src="@{/script/mousetrap-1.6.5.min.js}"></script>
<script defer type="text/javascript" th:src="@{/script/keyboard_shortcuts.js}"></script>
<script defer type="text/javascript" th:src="@{/script/feather-4.29.2.min.js}"></script>
</th:block>
</head>
</html>
126 changes: 85 additions & 41 deletions airsonic-main/src/main/resources/templates/mediaMain.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,31 @@
padding-right:3px;
padding-left:3px;
}
#ancestors {
margin-bottom: 0.1em;
}
#ancestors svg, #mediaDirTitle svg{
margin-right: 0.2em;
vertical-align: text-top;
}
#mediaDirController {
margin-top: 0.8em;
padding: 0.5em 0;
border-top: 1px solid gray;
}
#mediaDirTitle {
font-size: 150%;
padding: 0;
border: 0;
margin: 0;
}
#mediaDirController span {
margin-right: 0.3em;
}
#avgRating {
height: 20px;
margin-top: 0.5em;
}
</style>
<script type="text/javascript" th:inline="javascript"
th:with="paginationaddition=${#strings.contains(' 10 20 50 100 -1', ' '.concat(model['initialPaginationSizeFiles'] ?: '') ) ?
Expand Down Expand Up @@ -91,6 +116,9 @@
// ancestors
populateAncestors();

// media dir title
populateMediaDirTitle();

// comments
updateComments();

Expand Down Expand Up @@ -205,7 +233,8 @@
var urlBase = '[(@{/ratingJsp})]';
if (mediaDir.averageRating && mediaDir.averageRating > 0) {
$.get(urlBase + '?readOnly=true&rating=' + mediaDir.averageRating, data => {
$('#avgRating').html('&nbsp;&nbsp;'+data).show();
$('#avgRating').html(data);
$('#avgRating').prepend(feather.icons.users.toSvg({class: 'feather-sm'})).show();
});
} else {
$('#avgRating').html('').hide();
Expand Down Expand Up @@ -768,6 +797,12 @@
getMediaDirectories(initialIds, initialPaths);
}
});

feather.replace();
<!-- add title to feather icons-->
Array.from(document.querySelectorAll('svg.feather[title]')).forEach((element) => {
element.insertAdjacentHTML('afterbegin', `<title>${element.attributes.title.value}</title>`);
});
}

function loadArtistInfo() {
Expand Down Expand Up @@ -824,10 +859,20 @@
var ancestors = $("#ancestors").empty();
for (var len = mediaDir.ancestors.length, i = len - 1; i >= 0; i--) {
var ancestor = mediaDir.ancestors[i];
ancestors.append(feather.icons.folder.toSvg({class: 'feather-sm'}));
ancestors.append($("<a>").attr("href", "#").attr("onclick", "getMediaDirectory(" + ancestor.id + ")").text(ancestor.title));
ancestors.append(" » ");
}
ancestors.append(mediaDir.title);
}

function populateMediaDirTitle() {
$("#mediaDirTitle").empty();
if (mediaDir.contentType == 'album') {
$("#mediaDirTitle").append(feather.icons.disc.toSvg());
} else {
$("#mediaDirTitle").append(feather.icons.folder.toSvg());
}
$("#mediaDirTitle").append(mediaDir.title);
}

function toggleMediaDirStar(status) {
Expand All @@ -845,10 +890,15 @@

function updateStarImage() {
if (mediaDir.starred) {
$("#starImage").attr("src", /*[[${#themes.code('ratingOnImage')}]]*/ "icons\/default\/ratingOn.svg");
const svgTitle = /*[[#{playlist.more.unstar}]]*/ "Unstar";
$("#starMediaDir").empty().append(feather.icons.star.toSvg({class: 'feather-filled', title: svgTitle}));
} else {
$("#starImage").attr("src", /*[[${#themes.code('ratingOffImage')}]]*/ "icons\/default\/ratingOff.svg");
const svgTitle = /*[[#{playlist.more.star}]]*/ "Star";
$("#starMediaDir").empty().append(feather.icons.star.toSvg({title: svgTitle}));
}
Array.from(document.querySelectorAll('#starMediaDir svg.feather[title]')).forEach((element) => {
element.insertAdjacentHTML('afterbegin', `<title>${element.attributes.title.value}</title>`);
});
}

function onStar(table, indices, status) {
Expand Down Expand Up @@ -1096,55 +1146,50 @@
</script>
</head>
<body class="mainframe bgcolor1" onload="init();">
<div style="float:left">
<h1>
<img id="starImage" th:src="${#themes.code('ratingOffImage')}"
onclick="toggleMediaDirStar(!mediaDir.starred); return false;" style="cursor:pointer;height:18px;" alt="">

<span id="ancestors" style="vertical-align: middle"></span>

<div id="avgRating" style="display: inline-block"></div>
</h1>
<div style="float:left" id="mediaInfo">
<p id="ancestors" style="vertical-align: middle"></p>
<p id="mediaDirTitle"></p>
<div id="avgRating"></div>
</div>

<h2 th:if="${model.partyMode != true}">
<div style="float:right;padding-right:1em">
<img id="viewAsList" th:src="${#themes.code('viewAsListImage')}" alt="" class="headerSelected" style="margin-right:8px" onclick="setViewAsList(true)"/>
<img id="viewAsGrid" th:src="${#themes.code('viewAsGridImage')}" alt="" class="headerNotSelected" onclick="setViewAsList(false)"/>
</div>
<div style="clear:both"></div>
<div id="mediaDirController">
<div style="display: inline-block">
<span><a href="javascript:toggleMediaDirStar(!mediaDir.starred);" id="starMediaDir"></a></span>
</div>
<th:block th:if="${model.partyMode != true}">
<div th:if="${model.user.streamRole}" class="pagetype-dependent type-album type-artist" style="display: inline-block;">
<span class="header"><a href="javascript:playAll()" th:text="#{main.playall}"></a></span> |
<span class="header"><a href="javascript:playRandom()" th:text="#{main.playrandom}"></a></span> |
<span class="header"><a href="javascript:addAll()" th:text="#{main.addall}"></a></span> |
<span><a href="javascript:playAll()"><i data-feather="play" role="img" th:aria-label="#{main.playall}" th:title="#{main.playall}"></i></a></span>
<span><a href="javascript:playRandom()"><i data-feather="shuffle" role="img" th:aria-label="#{main.playrandom}" th:title="#{main.playrandom}"></i></a></span>
<span><a href="javascript:addAll()"><i data-feather="plus-square" role="img" th:aria-label="#{main.addall}" th:title="#{main.addall}"></i></a></span>
</div>

<div th:if="${model.user.downloadRole}" class="pagetype-dependent type-album" style="display: inline-block;">
<span class="header"><a href="javascript:downloadAll()" th:text="#{main.downloadall}"></a></span> |
<span><a href="javascript:downloadAll()"><i data-feather="download" role="img" th:aria-label="#{main.downloadall}" th:title="#{main.downloadall}"></i></a></span>
</div>

<div th:if="${model.user.coverArtRole}" class="pagetype-dependent type-album" style="display: inline-block;">
<span class="header"><a href="javascript:editTagsPage()" th:text="#{main.tags}"></a></span> |
<span><a href="javascript:editTagsPage()"><i data-feather="edit" role="img" th:aria-label="#{main.tags}" th:title="#{main.tags}"></i></a></span>
</div>

<span th:if="${model.user.commentRole}" class="header"><a href="javascript:toggleComment()" th:text="#{main.comment}"></a></span> |
</h2>
</div>

<div style="float:right;padding-right:1em">
<img id="viewAsList" th:src="${#themes.code('viewAsListImage')}" alt="" class="headerSelected" style="margin-right:8px" onclick="setViewAsList(true)"/>
<img id="viewAsGrid" th:src="${#themes.code('viewAsGridImage')}" alt="" class="headerNotSelected" onclick="setViewAsList(false)"/>
<span th:if="${model.user.commentRole}"><a href="javascript:toggleComment()"><i data-feather="message-square" role="img" th:aria-label="#{main.comment}" th:title="#{main.comment}"></i></a></span>
</th:block>
<div th:if=${model.user.shareRole} class="detail pagetype-dependent type-album" style="display: inline-block;">
<span><a href="javascript:shareAlbum()"><i data-feather="share-2" role="img" th:aria-label="#{main.sharealbum}" th:title=#{main.sharealbum}></i></a></span>
</div>
</div>
<div style="clear:both"></div>

<div class="detail pagetype-dependent type-album">
<div th:if="${model.user.commentRole}" id="userRating" style="display: inline-block;"></div>

<th:block th:if="${model.user.shareRole}">
<span class="header"><a href="javascript:shareAlbum()"><img th:src="${#themes.code('shareSmallImage')}" style="height:18px;" alt=""></a>
<a href="javascript:shareAlbum()" th:text="#{main.sharealbum}"></a> </span> |
</th:block>

<span class="header external-search"><span th:text="#{top.search}"></span>: <a href="#" onclick="searchExternally('google')">Google</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('wikipedia')">Wikipedia</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('allmusic')">allmusic</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('lastfm')">Last.fm</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('discogs')">Discogs</a> |</span>
<span class="header external-search musicbrainz"><a href="#" onclick="searchExternally('musicbrainz')">MusicBrainz</a> |</span>
<span class="header external-search"><span th:text="#{top.search}"></span>: <a href="#" onclick="searchExternally('google')">Google</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('wikipedia')">Wikipedia</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('allmusic')">allmusic</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('lastfm')">Last.fm</a> |</span>
<span class="header external-search"><a href="#" onclick="searchExternally('discogs')">Discogs</a> |</span>
<span class="header external-search musicbrainz"><a href="#" onclick="searchExternally('musicbrainz')">MusicBrainz</a> |</span>
</div>

<div id="playCountData" class="detail pagetype-dependent type-album"></div>
Expand Down Expand Up @@ -1219,6 +1264,5 @@ <h2 th:if="${model.partyMode != true}">
<p th:text="#{main.addtoplaylist.text}"></p>
<div id="dialog-select-playlist-list"></div>
</div>

</body>
</html>
4 changes: 2 additions & 2 deletions pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
<dependency>
<groupId>org.glassfish.jaxb</groupId>
<artifactId>jaxb-runtime</artifactId>
<version>4.0.4</version>
<version>4.0.5</version>
</dependency>
<dependency>
<groupId>org.apache.ant</groupId>
Expand Down Expand Up @@ -258,7 +258,7 @@
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-pmd-plugin</artifactId>
<version>3.21.2</version>
<version>3.22.0</version>
<executions>
<execution>
<id>validate</id>
Expand Down
2 changes: 1 addition & 1 deletion subsonic-rest-api/pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<plugin>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-xjc-plugin</artifactId>
<version>4.0.0</version>
<version>4.0.1</version>
<configuration>
<sourceRoot>${basedir}/target/generated/src/main/java</sourceRoot>
<xsdOptions>
Expand Down

0 comments on commit 6ce116a

Please sign in to comment.