evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added quality selection in context menu and removed the quality modal, except for one case; translated cut, copy, ecc in italian

Browse Source
This commit is contained in:
Roberto Tonino 2020-08-11 21:12:47 +02:00
parent 830f28b795
commit 76f354e3de
14 changed files with 210 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -7,8 +7,10 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
- Use Vue as much as possible
- First step: rewrite the app in Single File Components way ✅
- Second step: Implement custom contextmenu ⚒
- Implemented a first version
- Need heavy testing and more features
- Copy and paste functions ✅
- Copy Link where possible ✅
- Copy Image URL where possible
- Define cases
- Third step: Implement routing for the whole app using Vue Router
- Fourth step: Remove jQuery
- Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
@ -25,11 +27,6 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
- Maybe tabbing the section for easy navigation
- Could use a carousel, but it's not worth adding a new dep
- Variable selector near template inputs
- Add Custom Context menu to objects
- Copy Link where possible
- Copy Image URL where possible
- Context menu for pywebview (Context menu is blocked in pywebview)
- Copy and paste functions
- Block selection where it's not needed (keep only titles artists albums labels and useful data)
- There's a SASS mixin for this. Need to use it in the proper classes
- Better feedback for socket.io possible errors

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

41
src/components/ArtistTab.vue
View File

@ -8,14 +8,7 @@
}"
>
<h1>{{ title }}</h1>
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="link"
class="fab right"
>
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</header>
@ -64,18 +57,13 @@
explicit
</i>
{{ release.title }}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300;">
fiber_new
</i>
</td>
<td>{{ release.release_date }}</td>
<td>{{ release.nb_song }}</td>
<td
@click.stop="addToQueue"
@contextmenu.prevent="openQualityModal"
:data-link="release.link"
class="clickable"
>
<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
<i class="material-icons" :title="$t('globals.download_hint')">
file_download
</i>
@ -129,9 +117,6 @@ export default {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
sortBy(key) {
if (key == this.sortKey) {
this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
@ -168,7 +153,7 @@ export default {
this.sortKey = 'release_date'
this.sortOrder = 'desc'
this.head = [
{ title: this.$tc('globals.listTabs.title',1), sortKey: 'title' },
{ title: this.$tc('globals.listTabs.title', 1), sortKey: 'title' },
{ title: this.$t('globals.listTabs.releaseDate'), sortKey: 'release_date' },
{ title: this.$tc('globals.listTabs.track', 2), sortKey: 'nb_song' },
{ title: '', width: '32px' }
@ -182,13 +167,17 @@ export default {
},
computed: {
showTable() {
if (this.body){
if (this.sortKey=='nb_song')
return orderBy(this.body[this.currentTab], function (o) { return new Number(o.nb_song); }, this.sortOrder)
else
return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
}
else return []
if (this.body) {
if (this.sortKey == 'nb_song')
return orderBy(
this.body[this.currentTab],
function (o) {
return new Number(o.nb_song)
},
this.sortOrder
)
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
} else return []
}
},
mounted() {

14
src/components/TheChartsTab.vue
View File

@ -36,11 +36,7 @@
</div>
<div v-else id="charts_table">
<button @click="changeCountry">{{ $t('charts.changeCountry') }}</button>
<button
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="'https://www.deezer.com/playlist/' + id"
>
<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
{{ $t('charts.download') }}
</button>
<table class="table table--charts">
@ -72,9 +68,7 @@
<td class="table__cell--large breakline">
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
? ' ' + track.title_version
: '')
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</td>
<td
@ -96,7 +90,6 @@
</td>
<td
class="table__cell--download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
@ -146,9 +139,6 @@ export default {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
getTrackList(event) {
document.getElementById('content').scrollTo(0, 0)

174
src/components/TheContextMenu.vue
View File

@ -13,62 +13,86 @@
</template>
<script>
import Downloads from '@/utils/downloads'
import downloadQualities from '@js/qualities'
export default {
data: () => ({
menuOpen: false,
xPos: 0,
yPos: 0,
currentHref: '',
options: [
{
label: 'Cut',
show: true,
// Use arrow functions to keep the Vue instance in 'this'
// Use normal functions to keep the object instance in 'this'
action: () => {
document.execCommand('Cut')
data() {
return {
menuOpen: false,
xPos: 0,
yPos: 0,
deezerHref: '',
generalHref: ''
}
},
computed: {
options() {
// In the action property:
// Use arrow functions to keep the Vue instance in 'this'
// Use normal functions to keep the object instance in 'this'
const options = [
{
label: this.$t('globals.cut'),
show: true,
action: () => {
document.execCommand('Cut')
}
},
{
label: this.$t('globals.copy'),
show: true,
action: () => {
document.execCommand('Copy')
}
},
{
label: this.$t('globals.copyLink'),
show: false,
action: () => {
navigator.clipboard.writeText(this.generalHref).catch(err => {
console.error('Link copying failed', err)
})
}
},
{
label: this.$t('globals.copyDeezerLink'),
show: false,
action: () => {
navigator.clipboard.writeText(this.deezerHref).catch(err => {
console.error('Download link copying failed', err)
})
}
},
{
label: this.$t('globals.paste'),
show: true,
action: () => {
navigator.clipboard.readText().then(text => {
document.execCommand('insertText', undefined, text)
})
}
}
},
{
label: 'Copy',
show: true,
action: () => {
document.execCommand('Copy')
}
},
{
label: 'Copy Link',
show: false,
action: null
},
{
label: 'Copy Deezer Link',
show: false,
action: null
},
{
label: 'Paste',
show: true,
action: () => {
navigator.clipboard.readText().then(text => {
document.execCommand('insertText', undefined, text)
})
}
}
]
}),
]
downloadQualities.forEach(quality => {
options.push({
label: `${this.$t('globals.download', [quality.label])}`,
show: false,
action: this.tryToDownloadTrack.bind(null, quality.value)
})
})
return options
},
qualities() {
return downloadQualities
}
},
mounted() {
document.body.addEventListener('contextmenu', this.showMenu)
document.body.addEventListener('click', () => {
// Finish all operations before closing (may be not necessary)
this.$nextTick().then(() => {
this.menuOpen = false
this.options[2].show = false
this.options[3].show = false
})
})
document.body.addEventListener('click', this.hideMenu)
},
methods: {
showMenu(contextMenuEvent) {
@ -85,7 +109,8 @@ export default {
// Show 'Copy Link' option
if (elementClicked.matches('a')) {
this.showCopyLink(elementClicked.href)
this.generalHref = elementClicked.href
this.showCopyLinkOption()
}
let link = null
@ -101,30 +126,43 @@ export default {
// Show 'Copy Deezer Link' option
if (link) {
this.showCopyDeezerLink(link)
this.deezerHref = link
this.showDeezerOptions(link)
}
this.menuOpen = true
},
hideMenu() {
if (!this.menuOpen) return
// Finish all operations before closing (may be not necessary)
this.$nextTick().then(() => {
this.menuOpen = false
this.options[2].show = false
this.options[3].show = false
for (i = 5; i <= 10; i++) {
this.options[i].show = false
}
})
},
positionMenu(newX, newY) {
this.xPos = `${newX}px`
this.yPos = `${newY}px`
},
showCopyLink(href) {
showCopyLinkOption() {
this.options[2].show = true
this.options[2].action = () => {
navigator.clipboard.writeText(href).catch(err => {
console.error('Link copying failed', err)
})
},
showDeezerOptions() {
this.options[3].show = true
for (i = 5; i <= 10; i++) {
this.options[i].show = true
}
},
showCopyDeezerLink(link) {
this.options[3].show = true
this.options[3].action = () => {
navigator.clipboard.writeText(link).catch(err => {
console.error('Download link copying failed', err)
})
}
tryToDownloadTrack(qualityValue) {
Downloads.sendAddToQueue(this.deezerHref, qualityValue)
}
}
}
@ -164,6 +202,10 @@ export default {
background: var(--table-highlight);
filter: brightness(150%);
}
&__text {
text-transform: capitalize;
}
}
// Resetting buttons only for this component (because the style is scoped)

21
src/components/TheFavoritesTab.vue
View File

@ -38,7 +38,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -48,9 +47,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
}}
{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
<div
@ -64,7 +61,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -74,12 +70,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.creator.name])} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
{{ `${$t('globals.by', [release.creator.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
</div>
@ -95,7 +86,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -119,7 +109,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -163,7 +152,7 @@
<td class="table__cell--large breakline">
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</td>
<td
@ -185,7 +174,6 @@
</td>
<td
class="table__cell--download clickable"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
@ -267,9 +255,6 @@ export default {
e.stopPropagation()
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
updated_userSpotifyPlaylists(data) {
this.spotifyPlaylists = data
},

5
src/components/TheHomeTab.vue
View File

@ -20,7 +20,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -50,7 +49,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -89,9 +87,6 @@ export default {
addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
initHome(data) {
const {
playlists: { data: playlistData },

70
src/components/TheMainSearch.vue
View File

@ -9,8 +9,12 @@
<li class="section-tabs__tab search_tablinks" id="search_all_tab">{{ $t('globals.listTabs.all') }}</li>
<li class="section-tabs__tab search_tablinks" id="search_track_tab">{{ $tc('globals.listTabs.track', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_album_tab">{{ $tc('globals.listTabs.album', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">{{ $tc('globals.listTabs.artist', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">{{ $tc('globals.listTabs.playlist', 2) }}</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
{{ $tc('globals.listTabs.artist', 2) }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">
{{ $tc('globals.listTabs.playlist', 2) }}
</li>
</ul>
<div id="search_tab_content">
<!-- ### Main Search Tab ### -->
@ -19,7 +23,7 @@
<section
v-if="
(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) ||
results.allTab[section].length > 0
results.allTab[section].length > 0
"
class="search_section"
>
@ -46,7 +50,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay"
@ -61,13 +64,11 @@
results.allTab.TOP_RESULT[0].type == 'artist'
? $t('search.fans', [$n(results.allTab.TOP_RESULT[0].nb_fan)])
: $t('globals.by', [results.allTab.TOP_RESULT[0].artist]) +
' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}}
</p>
<span class="tag">{{
$tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1)
}}</span>
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
</div>
</div>
<div v-else-if="section == 'TRACK'">
@ -79,8 +80,8 @@
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' +
track.ALB_PICTURE +
'/32x32-000000-80-0-0.jpg'
track.ALB_PICTURE +
'/32x32-000000-80-0-0.jpg'
"
/>
</td>
@ -113,7 +114,6 @@
</td>
<td
class="table__cell--download table__cell--center clickable"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
role="button"
@ -140,14 +140,13 @@
class="circle coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/artist/' +
release.ART_PICTURE +
'/156x156-000000-80-0-0.jpg'
release.ART_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="'https://deezer.com/artist/' + release.ART_ID"
class="download_overlay"
@ -172,14 +171,13 @@
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' +
release.ALB_PICTURE +
'/156x156-000000-80-0-0.jpg'
release.ALB_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="'https://deezer.com/album/' + release.ALB_ID"
class="download_overlay"
@ -195,7 +193,9 @@
>
{{ release.ALB_TITLE }}
</p>
<p class="secondary-text">{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}</p>
<p class="secondary-text">
{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
</p>
</div>
</div>
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
@ -211,16 +211,15 @@
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/' +
release.PICTURE_TYPE +
'/' +
release.PLAYLIST_PICTURE +
'/156x156-000000-80-0-0.jpg'
release.PICTURE_TYPE +
'/' +
release.PLAYLIST_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
class="download_overlay"
@ -292,9 +291,9 @@
</i>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
? ' ' + track.title_version
: '')
(track.title_version && track.title.indexOf(track.title_version) == -1
? ' ' + track.title_version
: '')
}}
</div>
</td>
@ -317,7 +316,6 @@
</td>
<td
class="table__cell--download table__cell--center clickable"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
@ -349,7 +347,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -361,7 +358,11 @@
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ release.title }}
</p>
<p class="secondary-text">{{ $t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks) }}</p>
<p class="secondary-text">
{{
$t('globals.by', [release.artist.name]) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
</div>
</div>
@ -383,7 +384,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -414,7 +414,6 @@
<div
role="button"
aria-label="download"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
@ -424,9 +423,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
}}
{{ `${$t('globals.by', [release.user.name])} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
</p>
</div>
</div>
@ -613,9 +610,6 @@ export default {
addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
numberWithDots: Utils.numberWithDots,
convertDuration: Utils.convertDuration,
search(type) {

1
src/components/TheQualityModal.vue
View File

@ -53,7 +53,6 @@ export default {
}),
mounted() {
this.$root.$on('QualityModal:open', this.openModal)
this.$refs.modal.addEventListener('webkitAnimationEnd', this.handleAnimationEnd)
},
methods: {

12
src/components/TracklistTab.vue
View File

@ -133,15 +133,10 @@
</table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px;">{{ label }}</span>
<footer>
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">
<button @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', [$tc(`globals.listTabs.${type}`, 1)])}` }}
</button>
<button
class="with_icon"
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="selectedLinks()"
>
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
</button>
<button class="back-button">{{ $t('globals.back') }}</button>
@ -189,9 +184,6 @@ export default {
addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
toggleAll(e) {
this.body.forEach(item => {
if (item.type == 'track') {

26
src/js/qualities.js Normal file
View File

@ -0,0 +1,26 @@
export default [
{
label: 'FLAC',
value: 9
},
{
label: 'MP3 320kbps',
value: 3
},
{
label: 'MP3 128kbps',
value: 1
},
{
label: '360 Reality Audio [HQ]',
value: 15
},
{
label: '360 Reality Audio [MQ]',
value: 14
},
{
label: '360 Reality Audio [LQ]',
value: 13
}
]

5
src/lang/en.js
View File

@ -11,6 +11,11 @@ const en = {
toggle_download_tab_hint: 'Expand/Collapse',
clean_queue_hint: 'Clear Finished',
cancel_queue_hint: 'Cancel All',
cut: 'cut',
copy: 'copy',
copyLink: 'copy link',
copyDeezerLink: 'copy deezer link',
paste: 'paste',
listTabs: {
empty: '',
all: 'all',

5
src/lang/it.js
View File

@ -11,6 +11,11 @@ const it = {
toggle_download_tab_hint: 'Espandi/Riduci',
clean_queue_hint: 'Pulisci Lista',
cancel_queue_hint: 'Cancella tutti i download',
cut: 'taglia',
copy: 'copia',
copyLink: 'copia link',
copyDeezerLink: 'copia link deezer',
paste: 'incolla',
listTabs: {
all: 'tutto',
top_result: 'miglior risultato',

6
src/utils/downloads.js
View File

@ -1,9 +1,9 @@
import { socket } from '@/utils/socket'
function sendAddToQueue(url, bitrate = null) {
if (url != '') {
socket.emit('addToQueue', { url: url, bitrate: bitrate }, () => {})
}
if (!url) return
socket.emit('addToQueue', { url, bitrate }, () => {})
}
export default {