Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

beginning to implement category browser

Browse Source
This commit is contained in:
Jonas Heinrich 2020-11-21 19:23:26 +01:00
parent 322150821e
commit 290d3581dc
2 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Main.vue
View File

@ -236,10 +236,6 @@ export default {
vm.$store.dispatch('isPlaying', false)
vm.$store.dispatch('isBuffering', true)
},
onloaderror() {
showError(t('radio', 'Unable to reach and play radio station'))
vm.$store.dispatch('isBuffering', false)
},
})
audioPlayer.play()
audioPlayer.fade(0, vm.player.volume, 500)

111
src/components/Table.vue
View File

@ -10,49 +10,67 @@
</tr>
</thead>
<tbody>
<tr
v-for="(station, idx) in stationData"
:key="idx"
:class="{ selected: idx === activeItem}">
<td @click="doPlay(idx, station)">
<blur-hash-image
class="stationIcon"
width="32"
height="32"
:hash="station.blurHash"
:src="station.favicon" />
<span :class="{ 'icon-starred': favorites.flat().includes(station.stationuuid) }" />
</td>
<td class="nameColumn" @click="doPlay(idx, station)">
<span class="innernametext">
{{ station.name }}
</span>
</td>
<td class="actionColumn">
<Actions>
<ActionButton
v-if="!favorites.flat().includes(station.stationuuid)"
icon="icon-star"
:close-after-click="true"
@click="doFavor(idx, station)">
{{ t('radio', 'Add to favorites') }}
</ActionButton>
<ActionButton
v-if="favorites.flat().includes(station.stationuuid)"
icon="icon-star"
:close-after-click="true"
@click="doFavor(idx, station)">
{{ t('radio', 'Remove from favorites') }}
</ActionButton>
<ActionButton
icon="icon-info"
:close-after-click="true"
@click="toggleSidebar(station)">
{{ t('radio', 'Details') }}
</ActionButton>
</Actions>
</td>
</tr>
<template v-if="stationData[0].type!=='folder'">
<tr
v-for="(station, idx) in stationData"
:key="idx"
:class="{ selected: idx === activeItem}">
<td @click="doPlay(idx, station)">
<blur-hash-image
class="stationIcon"
width="32"
height="32"
:hash="station.blurHash"
:src="station.favicon" />
<span :class="{ 'icon-starred': favorites.flat().includes(station.stationuuid) }" />
</td>
<td class="nameColumn" @click="doPlay(idx, station)">
<span class="innernametext">
{{ station.name }}
</span>
</td>
<td class="actionColumn">
<Actions>
<ActionButton
v-if="!favorites.flat().includes(station.stationuuid)"
icon="icon-star"
:close-after-click="true"
@click="doFavor(idx, station)">
{{ t('radio', 'Add to favorites') }}
</ActionButton>
<ActionButton
v-if="favorites.flat().includes(station.stationuuid)"
icon="icon-star"
:close-after-click="true"
@click="doFavor(idx, station)">
{{ t('radio', 'Remove from favorites') }}
</ActionButton>
<ActionButton
icon="icon-info"
:close-after-click="true"
@click="toggleSidebar(station)">
{{ t('radio', 'Details') }}
</ActionButton>
</Actions>
</td>
</tr>
</template>
<template v-if="stationData[0].type==='folder'">
<tr
v-for="(station, idx) in stationData"
:key="idx"
@click="doPlay(idx, station)">
<td>
<span class="icon-folder" />
</td>
<td class="nameColumn">
<span class="innernametext">
{{ station.name }}
</span>
</td>
<td class="actionColumn" />
</tr>
</template>
</tbody>
</table>
</template>
@ -151,6 +169,13 @@ table {
background-repeat: no-repeat;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
span.icon-folder {
display: block;
background-size: cover;
width: 30px;
height: 30px;
}
}
tr {