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

Added quality select modal to download buttons

Browse Source
This commit is contained in:
RemixDev 2020-04-16 13:38:59 +02:00
parent 7afa9ddefe
commit ee2f43fa56
5 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/css/modules/middle-section.css
View File

@ -48,20 +48,50 @@
width: 90%; width: 90%;
} }
/* The Modal (background) */
.smallmodal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1250; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
animation-duration: 0.3s;
}
/* Modal Content */
.smallmodal-content {
background-color: none;
margin: auto;
width: 30%;
align-items: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.smallmodal-content button{
width: 100%;
margin-bottom: 8px;
}
@media only screen and (min-width: 601px) { @media only screen and (min-width: 601px) {
#container { #container, .smallmodal-content {
width: 85%; width: 85%;
} }
} }
@media only screen and (min-width: 993px) { @media only screen and (min-width: 993px) {
#container { #container, .smallmodal-content {
width: 70%; width: 70%;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#container { #container, .smallmodal-content {
width: 100%; width: 100%;
} }
} }

25
public/index.html
View File

@ -53,7 +53,7 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<div class="cover_container"> <div class="cover_container">
<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'" <img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img> v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
<div v-on:click="addToQueue('https://deezer.com/'+results.TOP_RESULT[0].__TYPE__+'/'+(results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''))" class="download_overlay"><i class="material-icons">get_app</i></div> <div v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+results.TOP_RESULT[0].__TYPE__+'/'+(results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<div class="info_box"> <div class="info_box">
<p class="primary-text">{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}</p> <p class="primary-text">{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}</p>
@ -69,7 +69,7 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td> <td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td class="breakline">{{track.ALB_TITLE}}</td> <td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td> <td>{{convertDuration(track.DURATION)}}</td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td> <td v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -77,7 +77,7 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<div v-for="release in results[section].data.slice(0, 10)" class="release"> <div v-for="release in results[section].data.slice(0, 10)" class="release">
<div class="cover_container"> <div class="cover_container">
<img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'"> <img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'">
<div v-on:click="addToQueue('https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : ''))" class="download_overlay"><i class="material-icons">get_app</i></div> <div v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<p class="primary-text">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p> <p class="primary-text">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
<p class="secondary-text">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p> <p class="secondary-text">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
@ -109,7 +109,7 @@ <h1>No Tracks found</h1>
<td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td> <td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td class="breakline">{{track.ALB_TITLE}}</td> <td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td> <td>{{convertDuration(track.DURATION)}}</td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td> <td v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -122,7 +122,7 @@ <h1>No Albums found</h1>
<div v-for="release in results.data" class="release"> <div v-for="release in results.data" class="release">
<div class="cover_container"> <div class="cover_container">
<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'"> <img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div v-on:click="addToQueue('https://www.deezer.com/album/'+release.ALB_ID)" class="download_overlay"><i class="material-icons">get_app</i></div> <div v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<p class="primary-text">{{ release.ALB_TITLE }}</p> <p class="primary-text">{{ release.ALB_TITLE }}</p>
<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p> <p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
@ -138,7 +138,7 @@ <h1>No Artists found</h1>
<div v-for="release in results.data" class="release"> <div v-for="release in results.data" class="release">
<div class="cover_container"> <div class="cover_container">
<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'"> <img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div v-on:click="addToQueue('https://www.deezer.com/artist/'+release.ART_ID)" class="download_overlay"><i class="material-icons">get_app</i></div> <div v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<p class="primary-text">{{ release.ART_NAME }}</p> <p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p> <p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
@ -154,7 +154,7 @@ <h1>No Playlists found</h1>
<div v-for="release in results.data" class="release"> <div v-for="release in results.data" class="release">
<div class="cover_container"> <div class="cover_container">
<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'"> <img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
<div v-on:click="addToQueue('https://www.deezer.com/playlist/'+release.PLAYLIST_ID)" class="download_overlay"><i class="material-icons">get_app</i></div> <div v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
</div> </div>
<p class="primary-text">{{ release.TITLE }}</p> <p class="primary-text">{{ release.TITLE }}</p>
<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p> <p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
@ -393,6 +393,17 @@ <h1>Settings</h1>
</div> </div>
</main> </main>
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button onclick="modalQualityButton(9)">Download FLAC</button><br>
<button onclick="modalQualityButton(3)">Download MP3 320kbps</button><br>
<button onclick="modalQualityButton(1)">Download MP3 128kbps</button><br>
<button onclick="modalQualityButton(15)">Download 360 Reality Audio [HQ]</button><br>
<button onclick="modalQualityButton(14)">Download 360 Reality Audio [MQ]</button><br>
<button onclick="modalQualityButton(13)">Download 360 Reality Audio [LQ]</button><br>
</div>
</div>
</body> </body>
<script type="text/javascript" src="/public/js/socket.io.js"></script> <script type="text/javascript" src="/public/js/socket.io.js"></script>
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>

26
public/js/app/app.js
View File

@ -166,7 +166,7 @@ socket.on("logged_out", function(){
var settingsTab = new Vue({ var settingsTab = new Vue({
el: '#settings_tab', el: '#settings_tab',
data: { data: {
settings: {}, settings: {tags: {}},
spotifyFeatures: {} spotifyFeatures: {}
} }
}) })
@ -217,3 +217,27 @@ function changeTab(evt, section, tabName) {
scrolledSearch(window[search_selected.split("_")[0]+"Search"]) scrolledSearch(window[search_selected.split("_")[0]+"Search"])
} }
} }
// quality modal stuff
var modalQuality = document.getElementById('modal_quality');
modalQuality.open = false
function openQualityModal(link){
$(modalQuality).data("url", link)
$(modalQuality).css('display', 'block')
$(modalQuality).addClass('animated fadeIn')
}
function modalQualityButton(bitrate){
var url=$(modalQuality).data("url")
if (url.indexOf(";") != -1){
urls = url.split(";")
urls.forEach(url=>{
sendAddToQueue(url, bitrate)
})
}else{
sendAddToQueue(url, bitrate)
}
$(modalQuality).addClass('animated fadeOut')
$(modalQuality).css('display', 'none')
}

6
public/js/app/downloadList.js
View File

@ -10,14 +10,14 @@ socket.on("init_downloadQueue", function(data){
}) })
} }
if (data.currentItem){ if (data.currentItem){
addToQueue(data['queueList'][data.currentItem]) addToQueue(data['queueList'][data.currentItem], true)
} }
data.queue.forEach(item=>{ data.queue.forEach(item=>{
addToQueue(data.queueList[item]) addToQueue(data.queueList[item])
}) })
}) })
function addToQueue(queueItem){ function addToQueue(queueItem, current=false){
queueList[queueItem.uuid] = queueItem queueList[queueItem.uuid] = queueItem
if ((queueItem.downloaded + queueItem.failed) == queueItem.size) if ((queueItem.downloaded + queueItem.failed) == queueItem.size)
queueComplete.push(queueItem.uuid) queueComplete.push(queueItem.uuid)
@ -40,7 +40,7 @@ function addToQueue(queueItem){
<i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i> <i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
</div> </div>
</div>`) </div>`)
if (queueItem.progress>0){ if (queueItem.progress>0 || current){
$('#bar_' + queueItem.uuid).removeClass('indeterminate').addClass('determinate') $('#bar_' + queueItem.uuid).removeClass('indeterminate').addClass('determinate')
} }
$('#bar_' +queueItem.uuid).css('width', queueItem.progress + '%') $('#bar_' +queueItem.uuid).css('width', queueItem.progress + '%')

15
public/js/app/search.js
View File

@ -71,7 +71,8 @@ var mainSearch = new Vue({
if (section != "TOP_RESULT") if (section != "TOP_RESULT")
clickElement('search_'+section.toLowerCase()+'_tab') clickElement('search_'+section.toLowerCase()+'_tab')
}, },
addToQueue: function(url){sendAddToQueue(url)} addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
} }
}) })
@ -88,7 +89,8 @@ var trackSearch = new Vue({
} }
}, },
methods: { methods: {
addToQueue: function(url){sendAddToQueue(url)} addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
} }
}) })
@ -105,7 +107,8 @@ var albumSearch = new Vue({
} }
}, },
methods: { methods: {
addToQueue: function(url){sendAddToQueue(url)} addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
} }
}) })
@ -122,7 +125,8 @@ var artistSearch = new Vue({
} }
}, },
methods: { methods: {
addToQueue: function(url){sendAddToQueue(url)} addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
} }
}) })
@ -139,7 +143,8 @@ var playlistSearch = new Vue({
} }
}, },
methods: { methods: {
addToQueue: function(url){sendAddToQueue(url)} addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)},
openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
} }
}) })