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('isPlaying', false)
vm.$store.dispatch('isBuffering', true) vm.$store.dispatch('isBuffering', true)
}, },
onloaderror() {
showError(t('radio', 'Unable to reach and play radio station'))
vm.$store.dispatch('isBuffering', false)
},
}) })
audioPlayer.play() audioPlayer.play()
audioPlayer.fade(0, vm.player.volume, 500) audioPlayer.fade(0, vm.player.volume, 500)

111
src/components/Table.vue
View File

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