Add "Play at 128kbps on mobile" setting

app/Http/Controllers/API/DataController.php

@@ -39,6 +39,7 @@ class DataController extends Controller
             'useYouTube' => YouTube::enabled(),
             'useiTunes' => iTunes::used(),
             'allowDownload' =>  config('koel.download.allow'),
+            'supportsTranscoding' => config('koel.streaming.ffmpeg_path') && is_executable(config('koel.streaming.ffmpeg_path')),
             'cdnUrl' => app()->staticUrl(),
             'currentVersion' => Application::KOEL_VERSION,
             'latestVersion' => auth()->user()->is_admin ? app()->getLatestVersion() : Application::KOEL_VERSION,

app/Http/Streamers/TranscodingStreamer.php

@@ -32,7 +32,7 @@ class TranscodingStreamer extends Streamer implements StreamerInterface
      */
     public function stream()
     {
-        $ffmpeg = config('koel.streaming.transcoding');
+        $ffmpeg = config('koel.streaming.ffmpeg_path');
         abort_unless(is_executable($ffmpeg), 500, 'Transcoding requires valid ffmpeg settings.');
 
         $bitRate = filter_var($this->bitRate, FILTER_SANITIZE_NUMBER_INT);

config/koel.php

@@ -44,7 +44,7 @@ return [
     'streaming' => [
         'bitrate' => env('OUTPUT_BIT_RATE', 128),
         'method' => env('STREAMING_METHOD'),
-        'transcoding' => env('FFMPEG_PATH', '/usr/local/bin/ffmpeg'),
+        'ffmpeg_path' => env('FFMPEG_PATH'),
     ],
 
     /*

resources/assets/js/components/main-wrapper/main-content/profile.vue

@@ -51,6 +51,12 @@
             Confirm before closing Koel
           </label>
         </div>
+        <div class="form-row">
+          <label>
+            <input type="checkbox" name="transcodeOnMobile" v-model="prefs.transcodeOnMobile" @change="savePreference">
+            Convert and play media at 128kbps on mobile
+          </label>
+        </div>
       </div>
 
       <section class="lastfm" >

resources/assets/js/services/playback.js

@@ -1,6 +1,7 @@
 import { shuffle, orderBy } from 'lodash'
 import plyr from 'plyr'
 import Vue from 'vue'
+import isMobile from 'ismobilejs'
 
 import { event } from '../utils'
 import { queueStore, sharedStore, userStore, songStore, preferenceStore as preferences } from '../stores'
@@ -55,7 +56,11 @@ export const playback = {
      */
     document.querySelector('.plyr').addEventListener('canplaythrough', e => {
       const nextSong = queueStore.next
-      if (!nextSong || nextSong.preloaded) {
+      if (!nextSong || nextSong.preloaded || (isMobile.any && preferences.transcodeOnMobile)) {
+        // Don't preload if
+        // - there's no next song
+        // - next song has already been preloaded
+        // - we're on mobile and "transcode" option is check, because it will break the functionality
         return
       }
 

resources/assets/js/stores/preference.js

@@ -18,7 +18,8 @@ export const preferenceStore = {
     },
     artistsViewMode: null,
     albumsViewMode: null,
-    selectedPreset: -1
+    selectedPreset: -1,
+    transcodeOnMobile: false
   },
 
   /**

resources/assets/js/stores/song.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import slugify from 'slugify'
 import { without, map, take, remove, orderBy, each, union, compact } from 'lodash'
+import isMobile from 'ismobilejs'
 
 import { secondsToHis, alerts, pluralize } from '../utils'
 import { http, ls } from '../services'
@@ -338,6 +339,9 @@ export const songStore = {
    * @return {string} The source URL, with JWT token appended.
    */
   getSourceUrl (song) {
+    if (isMobile.any && preferenceStore.transcodeOnMobile) {
+      return `${sharedStore.state.cdnUrl}api/${song.id}/play/1/128?jwt-token=${ls.get('jwt-token')}`
+    }
     return `${sharedStore.state.cdnUrl}api/${song.id}/play?jwt-token=${ls.get('jwt-token')}`
   },