danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

continued moving app to SFCs (already tested but something could not work)

This commit is contained in:
Roberto Tonino 2020-06-29 20:23:56 +02:00
parent 0cf3844b53
commit 77c875d932
12 changed files with 190 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

62
public/index.html
View File

@ -20,67 +20,9 @@
</head>
<body>
<div id="start_app_placeholder" class="loading_placeholder">
<span class="loading_placeholder__text">Connecting to the server...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="sidebar-placeholder"></div>
<main id="main_content">
<div id="middle_section">
<header id="search">
<div class="search__icon">
<i class="material-icons">search</i>
</div>
<input id="searchbar" autocomplete="off" type="search" name="searchbar" value=""
placeholder="Search something or paste a link..." autofocus>
</header>
<div id="content-placeholder"></div>
<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
<span class="loading_placeholder__text">Searching...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="download_tab_container" class="tab_hidden">
<div id="download_tab_drag_handler"></div>
<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
<div id="queue_buttons">
<i id="open_downloads_folder" class="material-icons download_bar_icon hide">folder_open</i>
<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div>
<div id="download_list"></div>
</div>
</main>
<audio id="preview-track">
<source id="preview-track_source" src="" type="audio/mpeg">
</audio>
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
</div>
</div>
<div id="app"></div>
</body>
<script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
<script src="/public/js/bundle.js"></script>

6
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

47
src/js/App.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div style="height: inherit;">
<div id="start_app_placeholder" class="loading_placeholder">
<span class="loading_placeholder__text">Connecting to the server...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<TheSidebar />
<TheMainContent />
<TheTrackPreview />
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button><br />
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br />
<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br />
<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br />
<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br />
<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br />
</div>
</div>
</div>
</template>
<script>
import TheSidebar from '@components/TheSidebar.vue'
import TheMainContent from '@components/TheMainContent.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue'
export default {
components: {
TheSidebar,
TheMainContent,
TheTrackPreview
}
}
</script>
<style>
</style>

33
src/js/app.js
View File

@ -1,23 +1,12 @@
import Vue from 'vue'
// Vue views components
import TheSidebar from '@components/TheSidebar.vue'
import ArtistTab from '@components/ArtistTab.vue'
import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue'
import TheHomeTab from '@components/TheHomeTab.vue'
import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
import TheAboutTab from '@components/TheAboutTab.vue'
// Object is needed for vue proxy
window.vol = {
preview_max_volume: 100
}
// Must be imported before settings tab at the moment
import App from '@/js/App.vue'
import TrackPreview from '@/js/track-preview.js'
import TheSettingsTab from '@components/TheSettingsTab.vue'
import TheContent from '@components/TheContent.vue'
// import '@components/main-search.js'
import TheMainSearch from '@components/TheMainSearch.vue'
import TracklistTab from '@components/TracklistTab.vue'
import $ from 'jquery'
import { socket } from '@/js/socket.js'
@ -30,7 +19,7 @@ import Search from '@/js/search.js'
/* ===== App initialization ===== */
function startApp() {
mountComponents()
mountApp()
setCurrentUserTheme()
Downloads.init()
@ -40,12 +29,10 @@ function startApp() {
TrackPreview.init()
}
/**
* This funcion is temporary. It will be removed when all components will be as SFC and all their methods will be called
* by using the EventBus.
*/
function mountComponents() {
new Vue({ render: h => h(TheContent) }).$mount('#content-placeholder')
function mountApp() {
new Vue({
render: h => h(App)
}).$mount('#app')
}
function initClient() {

6
src/js/components/TheContent.vue
View File

@ -1,7 +1,6 @@
<template>
<section id="content">
<div id="container">
<TheSidebar />
<ArtistTab />
<TheChartsTab />
<TheFavoritesTab />
@ -20,7 +19,6 @@
import ArtistTab from '@components/ArtistTab.vue'
import TracklistTab from '@components/TracklistTab.vue'
import TheSidebar from '@components/TheSidebar.vue'
import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue'
@ -32,7 +30,6 @@ import TheMainSearch from '@components/TheMainSearch.vue'
export default {
components: {
TheSidebar,
ArtistTab,
TheChartsTab,
TheFavoritesTab,
@ -43,9 +40,6 @@ export default {
TheSettingsTab,
TheMainSearch,
TracklistTab
},
mounted() {
console.log('content montato!')
}
}
</script>

29
src/js/components/TheMainContent.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<main id="main_content">
<TheMiddleSection />
<div id="download_tab_container" class="tab_hidden">
<div id="download_tab_drag_handler"></div>
<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
<div id="queue_buttons">
<i id="open_downloads_folder" class="material-icons download_bar_icon hide">folder_open</i>
<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div>
<div id="download_list"></div>
</div>
</main>
</template>
<script>
import TheMiddleSection from '@components/TheMiddleSection.vue'
export default {
components: {
TheMiddleSection
}
}
</script>
<style>
</style>

31
src/js/components/TheMiddleSection.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div id="middle_section">
<TheSearchBar />
<TheContent />
<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
<span class="loading_placeholder__text">Searching...</span>
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</template>
<script>
import TheContent from '@components/TheContent.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
export default {
components: {
TheContent,
TheSearchBar
}
}
</script>
<style>
</style>

23
src/js/components/TheSearchBar.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<header id="search">
<div class="search__icon">
<i class="material-icons">search</i>
</div>
<input
id="searchbar"
autocomplete="off"
type="search"
name="searchbar"
value=""
placeholder="Search something or paste a link..."
autofocus
/>
</header>
</template>
<script>
export default {}
</script>
<style>
</style>

40
src/js/components/TheTrackPreview.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<audio id="preview-track" @canplay="onCanPlay" @timeupdate="onTimeUpdate" ref="previewEl">
<source id="preview-track_source" src="" type="audio/mpeg" />
</audio>
</template>
<script>
import $ from 'jquery'
export default {
data: () => ({
previewStopped: false
}),
methods: {
async onCanPlay() {
await this.$refs.previewEl.play()
this.previewStopped = false
$(this.$refs.previewEl).animate({ volume: vol.preview_max_volume / 100 }, 500)
},
onTimeUpdate() {
// Prevents first time entering in this function
if (isNaN(this.$refs.previewEl.duration)) return
if (this.$refs.previewEl.currentTime <= this.$refs.previewEl.duration - 1) return
$(this.$refs.previewEl).animate({ volume: 0 }, 800)
this.previewStopped = true
$('a[playing] > .preview_controls').css({ opacity: 0 })
$('*').removeAttr('playing')
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
}
}
}
</script>
<style>
</style>

16
src/js/track-preview.js
View File

@ -1,35 +1,23 @@
import $ from 'jquery'
/* ===== Globals ====== */
// Object is needed for vue proxy
window.vol = {
preview_max_volume: 100
}
/* ===== Locals ===== */
let preview_track = document.getElementById('preview-track')
let preview_track
let preview_stopped = true
// init stuff
function init() {
preview_track = document.getElementById('preview-track')
preview_track.volume = 1
// start playing when track loaded
preview_track.addEventListener('canplay', function() {
preview_track.play()
preview_stopped = false
$(preview_track).animate({ volume: vol.preview_max_volume / 100 }, 500)
})
// auto fadeout when at the end of the song
preview_track.addEventListener('timeupdate', function() {
if (preview_track.currentTime > preview_track.duration - 1) {
$(preview_track).animate({ volume: 0 }, 800)
preview_stopped = true
$('a[playing] > .preview_controls').css({ opacity: 0 })
$('*').removeAttr('playing')
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
}
})
}

2
src/styles/scss/globals/_globals.scss
View File

@ -301,7 +301,7 @@ a {
#main_content {
margin-left: $sidebar-width;
width: calc(100% - $sidebar-width);
width: calc(100% - #{$sidebar-width});
height: 100%;
display: flex;
}