Skip to content

Commit

Permalink
Add directory browser for media paths in server settiongs.
Browse files Browse the repository at this point in the history
  • Loading branch information
CDrummond committed Oct 13, 2020
1 parent 10467ec commit 6117cb6
Show file tree
Hide file tree
Showing 12 changed files with 160 additions and 23 deletions.
1 change: 1 addition & 0 deletions ChangeLog
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
17. For piCorePlayer and SqueezeAMP (SqueezeESP32) players, add action to show
config page in main menu of Player Settings dialog.
18. Add BBC sounds logo.
19. Add directory browser for media paths in server settings.

1.9.2
-----
Expand Down
2 changes: 1 addition & 1 deletion MaterialSkin/HTML/material/html/css/classic-skin/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ select {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20x%3D%2212px%22%20y%3D%220px%22%20width%3D%2224px%22%20height%3D%225px%22%20viewBox%3D%220%200%206%203%22%20enable-background%3D%22new%200%200%206%203%22%20xml%3Aspace%3D%22preserve%22%20fill%3D%22%23fff%22%3E%3Cpolygon%20points%3D%225.992%2C0%202.992%2C3%20-0.008%2C0%20%22/%3E%3C/svg%3E);
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="button"]:focus {
input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="button"]:focus, .msk-dir-btn:hover, .msk-dir-btn:focus {
background-color: #5F5F5F;
}

Expand Down
2 changes: 1 addition & 1 deletion MaterialSkin/HTML/material/html/css/classic-skin/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ select {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20x%3D%2212px%22%20y%3D%220px%22%20width%3D%2224px%22%20height%3D%225px%22%20viewBox%3D%220%200%206%203%22%20enable-background%3D%22new%200%200%206%203%22%20xml%3Aspace%3D%22preserve%22%20fill%3D%22%23000%22%3E%3Cpolygon%20points%3D%225.992%2C0%202.992%2C3%20-0.008%2C0%20%22/%3E%3C/svg%3E);
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="button"]:focus {
input[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:focus, input[type="button"]:focus, .msk-dir-btn:hover, .msk-dir-btn:focus {
background-color: #ddd;
}

Expand Down
32 changes: 20 additions & 12 deletions MaterialSkin/HTML/material/html/css/classic-skin/mods.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ div#browsedbList {
}

#choose_setting {

top:8px;
left:18px;
margin-left:-8px;
Expand Down Expand Up @@ -210,13 +209,28 @@ input[type=checkbox], input[type=radio] {
height:24px;
}

.msk-dir-btn:before, input[type=checkbox]:before, input[type=radio]:before {
vertical-align: middle!important;
font-family: "Material Icons"!important;
font-size:24px!important;
line-height:24px!important;
text-decoration:none!important;
}

.msk-dir-btn:before {
content:"folder";
line-height:32px!important;
}

.msk-dir-btn {
padding-left:4px;
width:28px;
height:32px;
border-radius:50%;
}

input[type=checkbox]:before {
font-family: "Material Icons";
font-size:24px;
line-height:24px;
content:"check_box_outline_blank";
/*margin-right:4px;*/
text-decoration:none;
}

input[type=checkbox]:checked:before {
Expand All @@ -233,13 +247,7 @@ input[type=checkbox], input[type=radio] {
}

input[type=radio]:before {
vertical-align: middle;
font-family: "Material Icons";
font-size:24px;
line-height:24px;
content:"radio_button_unchecked";
/*margin-right:4px;*/
text-decoration:none;
}

input[type=radio]:checked:before {
Expand Down
6 changes: 6 additions & 0 deletions MaterialSkin/HTML/material/html/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -1982,3 +1982,9 @@ img[lazy='loaded'].np-image-desktop, img[lazy='loaded'].np-image-landscape, img[
#back-button {
margin-right:14px !important;
}

.dir-select-list {
height:600px;
max-height:calc((var(--vh, 1vh)*100) - 170px);
overflow:auto;
}
91 changes: 91 additions & 0 deletions MaterialSkin/HTML/material/html/js/dirselect-dialog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/**
* LMS-Material
*
* Copyright (c) 2018-2020 Craig Drummond <[email protected]>
* MIT license.
*/
'use strict';

var lmsPromptDialog = Vue.component("lms-dirselect-dialog", {
template: `
<v-dialog v-model="show" v-if="show" persistent max-width="600">
<v-card>
<v-card-title>{{i18n('Select desired folder')}}</v-card-title>
<v-card-text class="dir-select-list">
<v-treeview :items="items" :load-children="fetch" open-on-click :open.sync="open">
<template v-slot:prepend="{ item }" style="width:22px">
<v-icon v-if="item.children" @click.stop="selected=item.id">{{selected==item.id ? 'radio_button_checked' : 'radio_button_unchecked'}}</v-icon>
</template>
</v-treeview>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click.native="close()">{{i18n('Cancel')}}</v-btn>
<v-btn flat :disabled="undefined==selected" @click.native="setPath()">{{i18n('Set Path')}}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>`,
data() {
return {
show:false,
open: [],
items: [{name:i18n("Loading..."), id:"<initial>"}],
selected: undefined
}
},
mounted() {
bus.$on('dirselect.open', function(elem) {
if (undefined!=elem) {
this.show = true;
this.fetch(null);
this.elem = elem;
// TODO: Expand current path?
}
}.bind(this));
bus.$on('esc', function() {
if (this.$store.state.activeDialog == 'dirselect') {
this.close(false);
}
}.bind(this));
},
methods: {
close() {
this.open=[];
this.items=[];
this.elem=undefined;
this.show=false;
},
setPath() {
if (undefined!=this.selected) {
this.elem.value=this.selected;
this.close();
}
},
async fetch(item) {
lmsList("", ["readdirectory"], ["filter:foldersonly", undefined==item ? "folder:/" : ("folder:"+item.id)], 0, 500).then(({data}) => {
var items = [];
if (undefined!=data.result.fsitems_loop) {
for (var i=0, loop=data.result.fsitems_loop, len=loop.length; i<len; ++i) {
items.push({name:loop[i].name, id:loop[i].path, children:[]});
}
} else {
items.push({name:i18n('Empty'), id:item.id+".empty"});
}
if (undefined==item) {
this.items = items;
} else {
item.children = items;
this.open.push(item.id);
}
}).catch(err => {
bus.$emit('showError', i18n('Failed to get folder listing'));
});
}
},
watch: {
'show': function(val) {
this.$store.commit('dialogOpen', {name:'dirselect', shown:val});
}
}
});

34 changes: 32 additions & 2 deletions MaterialSkin/HTML/material/html/js/iframe-dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,35 @@ function otherClickHandler(e) {
}
}

function clickDirSelect(elem) {
var i = elem.srcElement.id.split('.')[1];
var path = elem.srcElement.ownerDocument.getElementById('mediadirs'+i);
bus.$emit('dlg.open', 'dirselect', path);
}

function addDirSelectButtons(doc) {
for (var i=0; i<20; ++i) {
var elem = doc.getElementById("mediadirs"+i);
if (undefined==elem) {
return;
}
if (0==i) {
// Insert a blank header between "Folder" and "Music"
var th = doc.createElement("th");
elem.parentNode.parentNode.parentNode.firstChild.insertBefore(th, elem.parentNode.parentNode.parentNode.firstChild.childNodes[2]);
}
var td = doc.createElement("td");
td.classList = elem.parentNode.classList;
var btn = doc.createElement("div");
btn.id="msk-dir-btn."+i;
btn.classList.add("msk-dir-btn");
btn.addEventListener("click", clickDirSelect);
td.appendChild(btn);
// Append our icon after path field
elem.parentNode.parentNode.insertBefore(td, elem.parentNode.nextSibling);
}
}

function hideClassicSkinElems(page, textCol) {
if (!page) {
return;
Expand All @@ -140,8 +169,9 @@ function hideClassicSkinElems(page, textCol) {
let toHide = undefined;
if ('player'==page) {
toHide = new Set(['ALARM', 'PLUGIN_DSTM']);
}
if ('search'==page) {
} else if ('server'==page) {
addDirSelectButtons(content);
} else if ('search'==page) {
if (content.addEventListener) {
content.addEventListener('click', searchClickHandler);
} else if (content.attachEvent) {
Expand Down
6 changes: 3 additions & 3 deletions MaterialSkin/HTML/material/html/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ var app = new Vue({
el: '#app',
data() {
return { dialogs: { uisettings: false, playersettings: false, info: false, sync: false, group: false, volume: false,
manage: false, rndmix: false, favorite: false, rating: false, sleep: false,
movequeue: false, podcast: false, podcastsearch: false, iteminfo: false, iframe: false,
dstm: false, savequeue: false, icon: false, prompt:false, addtoplaylist: false } }
manage: false, rndmix: false, favorite: false, rating: false, sleep: false, movequeue: false,
podcast: false, podcastsearch: false, iteminfo: false, iframe: false, dstm: false, savequeue: false,
icon: false, prompt:false, addtoplaylist: false, dirselect: false } }
},
created() {
this.autoLayout = true;
Expand Down
2 changes: 1 addition & 1 deletion MaterialSkin/HTML/material/html/lib/vuetify.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion MaterialSkin/HTML/material/html/lib/vuetify.min.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion MaterialSkin/HTML/material/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
<lms-icon-dialog v-if="dialogs.icon"></lms-icon-dialog>
<lms-prompt-dialog v-if="dialogs.prompt"></lms-prompt-dialog>
<lms-addtoplaylist-dialog v-if="dialogs.addtoplaylist"></lms-addtoplaylist-dialog>
<lms-dirselect-dialog v-if="dialogs.dirselect"></lms-dirselect-dialog>
<lms-screensaver></lms-screensaver>
<lms-volumeoverlay></lms-volumeoverlay>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
Expand Down Expand Up @@ -177,7 +178,7 @@
}
}
function loadOtherFiles() {
addJsToDocument("html/js/", ["browse-resp", "browse-functions", "nowplaying-functions", "prompt-dialog", "standarditems", "sync-dialog", "groupplayers-dialog", "ui-settings", "player-settings", "volume", "information", "randommix-dialog", "rating-dialog", "manage-players", "favorite-dialog", "sleep-dialog", "movequeue-dialog", "podcast-dialog", "podcast-search-dialog", "info-dialog", "iframe-dialog", "icon-dialog", "dstm-dialog", "savequeue-dialog", "addtoplaylist-dialog", "screensaver", "volume-overlay"],
addJsToDocument("html/js/", ["browse-resp", "browse-functions", "nowplaying-functions", "prompt-dialog", "standarditems", "sync-dialog", "groupplayers-dialog", "ui-settings", "player-settings", "volume", "information", "randommix-dialog", "rating-dialog", "manage-players", "favorite-dialog", "sleep-dialog", "movequeue-dialog", "podcast-dialog", "podcast-search-dialog", "info-dialog", "iframe-dialog", "icon-dialog", "dstm-dialog", "savequeue-dialog", "addtoplaylist-dialog", "screensaver", "volume-overlay", "dirselect-dialog"],
[% PERL %]
my $version=Plugins::MaterialSkin::Plugin->pluginVersion();
print(" \"$version\", )");
Expand Down
2 changes: 1 addition & 1 deletion tools/vuetify/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,6 @@ export * from './VTextField'
export * from './VTimePicker'
export * from './VToolbar'
export * from './VTooltip'
//export * from './VTreeview'
export * from './VTreeview'
//export * from './VWindow'
export * from './transitions'

0 comments on commit 6117cb6

Please sign in to comment.