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

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

Browse Source
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> </head>
<body> <body>
<div id="start_app_placeholder" class="loading_placeholder"> <div id="app"></div>
<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>
</body> </body>
<script type="text/javascript" src="/public/js/vendor/socket.io.js"></script> <script type="text/javascript" src="/public/js/vendor/socket.io.js"></script>
<script src="/public/js/bundle.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' import Vue from 'vue'
// Vue views components // Object is needed for vue proxy
import TheSidebar from '@components/TheSidebar.vue' window.vol = {
import ArtistTab from '@components/ArtistTab.vue' preview_max_volume: 100
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'
// Must be imported before settings tab at the moment import App from '@/js/App.vue'
import TrackPreview from '@/js/track-preview.js' 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 $ from 'jquery'
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
@ -30,7 +19,7 @@ import Search from '@/js/search.js'
/* ===== App initialization ===== */ /* ===== App initialization ===== */
function startApp() { function startApp() {
mountComponents() mountApp()
setCurrentUserTheme() setCurrentUserTheme()
Downloads.init() Downloads.init()
@ -40,12 +29,10 @@ function startApp() {
TrackPreview.init() TrackPreview.init()
} }
/** function mountApp() {
* This funcion is temporary. It will be removed when all components will be as SFC and all their methods will be called new Vue({
* by using the EventBus. render: h => h(App)
*/ }).$mount('#app')
function mountComponents() {
new Vue({ render: h => h(TheContent) }).$mount('#content-placeholder')
} }
function initClient() { function initClient() {

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

@ -1,7 +1,6 @@
<template> <template>
<section id="content"> <section id="content">
<div id="container"> <div id="container">
<TheSidebar />
<ArtistTab /> <ArtistTab />
<TheChartsTab /> <TheChartsTab />
<TheFavoritesTab /> <TheFavoritesTab />
@ -20,7 +19,6 @@
import ArtistTab from '@components/ArtistTab.vue' import ArtistTab from '@components/ArtistTab.vue'
import TracklistTab from '@components/TracklistTab.vue' import TracklistTab from '@components/TracklistTab.vue'
import TheSidebar from '@components/TheSidebar.vue'
import TheChartsTab from '@components/TheChartsTab.vue' import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue' import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue' import TheErrorsTab from '@components/TheErrorsTab.vue'
@ -32,7 +30,6 @@ import TheMainSearch from '@components/TheMainSearch.vue'
export default { export default {
components: { components: {
TheSidebar,
ArtistTab, ArtistTab,
TheChartsTab, TheChartsTab,
TheFavoritesTab, TheFavoritesTab,
@ -43,9 +40,6 @@ export default {
TheSettingsTab, TheSettingsTab,
TheMainSearch, TheMainSearch,
TracklistTab TracklistTab
},
mounted() {
console.log('content montato!')
} }
} }
</script> </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' import $ from 'jquery'
/* ===== Globals ====== */
// Object is needed for vue proxy
window.vol = {
preview_max_volume: 100
}
/* ===== Locals ===== */ /* ===== Locals ===== */
let preview_track = document.getElementById('preview-track') let preview_track
let preview_stopped = true let preview_stopped = true
// init stuff // init stuff
function init() { function init() {
preview_track = document.getElementById('preview-track')
preview_track.volume = 1 preview_track.volume = 1
// start playing when track loaded // start playing when track loaded
preview_track.addEventListener('canplay', function() { preview_track.addEventListener('canplay', function() {
preview_track.play()
preview_stopped = false preview_stopped = false
$(preview_track).animate({ volume: vol.preview_max_volume / 100 }, 500)
}) })
// auto fadeout when at the end of the song // auto fadeout when at the end of the song
preview_track.addEventListener('timeupdate', function() { preview_track.addEventListener('timeupdate', function() {
if (preview_track.currentTime > preview_track.duration - 1) { if (preview_track.currentTime > preview_track.duration - 1) {
$(preview_track).animate({ volume: 0 }, 800)
preview_stopped = true preview_stopped = true
$('a[playing] > .preview_controls').css({ opacity: 0 })
$('*').removeAttr('playing')
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
} }
}) })
} }

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

@ -3,7 +3,7 @@ input[type='password'],
input[type='number'], input[type='number'],
input[type='search'] { input[type='search'] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: calc(100% - 16px); width: calc(100% - 16px);
border: 0px solid black; border: 0px solid black;
line-height: 36px; line-height: 36px;
@ -301,7 +301,7 @@ a {
#main_content { #main_content {
margin-left: $sidebar-width; margin-left: $sidebar-width;
width: calc(100% - $sidebar-width); width: calc(100% - #{$sidebar-width});
height: 100%; height: 100%;
display: flex; display: flex;
} }