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

style: replaced _track-preview.scss with Vue component and Tailwind styles

Browse Source
This commit is contained in:
Roberto Tonino 2020-10-13 23:48:00 +02:00
parent 36d5484b3a
commit f600e8afad
9 changed files with 62 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

25
src/components/globals/PreviewControls.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
methods: {
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
}
}
}
</script>

2
src/components/globals/TheTrackPreview.vue
View File

@ -66,7 +66,7 @@ export default {
e.preventDefault()
e.stopPropagation()
const { currentTarget: obj } = event
const { currentTarget: obj } = e
var icon = obj.tagName == 'I' ? obj : obj.querySelector('i')

21
src/components/pages/Charts.vue
View File

@ -53,15 +53,7 @@
:class="{ 'single-cover': track.preview }"
:data-preview="track.preview"
>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
v-if="track.preview"
class="material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
@ -109,12 +101,15 @@ import { mapGetters } from 'vuex'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
import { getChartsData } from '@/data/charts'
import EventBus from '@/utils/EventBus'
import PreviewControls from '@components/globals/PreviewControls.vue'
export default {
components: {
PreviewControls
},
data() {
return {
country: '',
@ -138,12 +133,6 @@ export default {
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
addToQueue(e) {
e.stopPropagation()
sendAddToQueue(e.currentTarget.dataset.link)

24
src/components/pages/Favorites.vue
View File

@ -175,15 +175,8 @@
@click="playPausePreview"
:data-preview="track.preview"
>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
v-if="track.preview"
class="material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
@ -242,10 +235,15 @@ import { socket } from '@/utils/socket'
import { sendAddToQueue, aggregateDownloadLinks } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
import { toast } from '@/utils/toasts'
import { getFavoritesData } from '@/data/favorites'
import EventBus from '@/utils/EventBus'
import PreviewControls from '@components/globals/PreviewControls.vue'
export default {
components: {
PreviewControls
},
data() {
return {
tracks: [],
@ -293,12 +291,6 @@ export default {
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
convertDuration,
downloadAllOfType() {
try {

18
src/components/pages/Tracklist.vue
View File

@ -42,7 +42,11 @@
<div class="table__cell-content table__cell-content--vertical-center">
<i
class="material-icons"
:class="{ preview_playlist_controls: track.preview, disabled: !track.preview }"
:class="{
preview_playlist_controls: track.preview,
'cursor-pointer': track.preview,
disabled: !track.preview
}"
v-on="{ click: track.preview ? playPausePreview : false }"
:data-preview="track.preview"
:title="$t('globals.play_hint')"
@ -109,7 +113,11 @@
<i
v-if="track.preview_url"
@click="playPausePreview"
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
class="material-icons"
:class="{
preview_playlist_controls: track.preview_url,
'cursor-pointer': track.preview_url
}"
:data-preview="track.preview_url"
:title="$t('globals.play_hint')"
>
@ -132,11 +140,11 @@
</table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer>
<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button>
<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
<button class="flex items-center btn btn-primary" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
</button>
</footer>
</div>

21
src/components/search/ResultsTracks.vue
View File

@ -25,15 +25,8 @@
:class="'rounded' + (track.preview ? ' single-cover' : '')"
:data-preview="track.preview"
>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
v-if="track.preview"
class="material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
@ -80,6 +73,7 @@
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
import PreviewControls from '@components/globals/PreviewControls.vue'
import EventBus from '@/utils/EventBus'
import { convertDuration } from '@/utils/utils'
@ -87,18 +81,13 @@ import { convertDuration } from '@/utils/utils'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
BaseLoadingPlaceholder,
PreviewControls
},
methods: {
convertDuration,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
}
}
}

18
src/styles/scss/_track-preview.scss
View File

@ -1,18 +0,0 @@
.preview_controls {
opacity: 0;
display: block;
background: rgba(0, 0, 0, 0.5);
width: 56px;
height: 56px;
text-align: center;
line-height: 56px;
position: absolute;
border-radius: 5px;
top: 0;
right: 0;
transition: opacity 200ms ease-in-out;
}
.preview_playlist_controls {
cursor: pointer;
}

1
src/styles/scss/style.scss
View File

@ -41,5 +41,4 @@ body {
@import './progressbar';
@import './sidebar';
@import './stackedTabs';
@import './track-preview';
@import './toasts';