fix audio playback, continious scroll, ajax request user agent

appinfo/info.xml

@@ -16,6 +16,9 @@
     <dependencies>
         <nextcloud min-version="19" max-version="20"/>
     </dependencies>
+    <commands>
+      <command>OCA\Radio\Command\Search</command>
+    </commands>
     <navigations>
         <navigation>
             <name>Radio</name>

src/components/Main.vue

@@ -6,7 +6,9 @@
 				<Breadcrumb title="Home" href="/" />
 				<Breadcrumb title="Top" href="/Top" />
 			</Breadcrumbs>
-			<Table :station-data="tableData" />
+			<Table
+				:station-data="tableData"
+				@doPlay="doPlay" />
 		</AppContent>
 	</Content>
 </template>
@@ -20,6 +22,8 @@ import Navigation from './Navigation'
 import Table from './Table'
 import { Howl } from 'howler'
 
+let audioPlayer = null
+
 export default {
 	name: 'Main',
 	components: {
@@ -37,26 +41,31 @@ export default {
 	mounted() {
 		this.loadStations()
 		this.scroll()
-		this.play()
 	},
 	methods: {
-		play() {
-			const sound = new Howl({
-				src: ['http://stream.srg-ssr.ch/m/drsvirus/mp3_128'],
+		doPlay(station) {
+			if (audioPlayer !== null) {
+				audioPlayer.fade(100, 0, 500) // FIXME persistent volume state
+				audioPlayer.unload() // FIXME do unload after fadeout
+			}
+			audioPlayer = new Howl({
+				src: [station.url_resolved],
+				volume: 0,
 			})
-			sound.play()
+			audioPlayer.play()
+			audioPlayer.fade(0, 100, 500) // FIXME persistent volume state
 		},
 		loadStations() {
 			const vm = this
-			this.$jquery.ajax({
-				type: 'POST',
-				url: 'https://de1.api.radio-browser.info/json/stations/topclick',
-				data: '{ "limit": 20, "offset": 20 }',
-				contentType: 'application/json',
-		    dataType: 'json',
-			})
+			this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/search',
+				{
+					limit: 20,
+					order: 'clickcount',
+					reverse: true,
+					offset: vm.offset,
+					'User-Agent': 'Nextcloud Radio/1.0.0', // FIXME global version
+				})
 				.done(function(data) {
-					console.log('new data')
 					vm.tableData = vm.tableData.concat(data)
 					vm.offset += 20
 				})

src/components/Table.vue

@@ -11,11 +11,11 @@
 		</thead>
 		<tbody v-if="stationData">
 			<tr v-for="(station, idx) in stationData" :key="idx">
-				<td>
+				<td @click="doPlay">
 					<div class="stationIcon"
 						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
 				</td>
-				<td class="filenameColumn">
+				<td class="filenameColumn" @click="doPlay(station)">
 					<span class="innernametext">
 						{{ station.name }}
 					</span>
@@ -51,6 +51,11 @@ export default {
 			default() { return [] },
 		},
 	},
+	methods: {
+		doPlay(station) {
+			this.$emit('doPlay', station)
+		},
+	},
 }
 </script>
 
@@ -110,6 +115,11 @@ table {
 
 		td.filenameColumn .innernametext {
 			color: var(--color-main-text);
+			text-overflow: ellipsis;
+			overflow: hidden;
+			position: relative;
+			vertical-align: top;
+			user-select: none;
 		}
 
 		.stationIcon {

src/main.js

@@ -35,5 +35,10 @@ Vue.prototype.$jquery = jquery
 export default new Vue({
 	el: '#content',
 	router,
+	methods: {
+		doPlay() {
+			console.log('event handled!')
+		},
+	},
 	render: h => h(App),
 })