From 96e5c62ce027c31d9ce0c6a419bd5b0cc737cc5c Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Sun, 26 Mar 2017 17:02:03 +0800
Subject: [PATCH] Add "Play at 128kbps on mobile" setting

---
 app/Http/Controllers/API/DataController.php                | 1 +
 app/Http/Streamers/TranscodingStreamer.php                 | 2 +-
 config/koel.php                                            | 2 +-
 .../js/components/main-wrapper/main-content/profile.vue    | 6 ++++++
 resources/assets/js/services/playback.js                   | 7 ++++++-
 resources/assets/js/stores/preference.js                   | 3 ++-
 resources/assets/js/stores/song.js                         | 4 ++++
 7 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/API/DataController.php b/app/Http/Controllers/API/DataController.php
index 02f68593..7c41a667 100644
--- a/app/Http/Controllers/API/DataController.php
+++ b/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,
diff --git a/app/Http/Streamers/TranscodingStreamer.php b/app/Http/Streamers/TranscodingStreamer.php
index de724877..2bb94ed9 100644
--- a/app/Http/Streamers/TranscodingStreamer.php
+++ b/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);
diff --git a/config/koel.php b/config/koel.php
index 90a6d24e..ef34cd6b 100644
--- a/config/koel.php
+++ b/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'),
     ],
 
     /*
diff --git a/resources/assets/js/components/main-wrapper/main-content/profile.vue b/resources/assets/js/components/main-wrapper/main-content/profile.vue
index 5d187531..8bd2355a 100644
--- a/resources/assets/js/components/main-wrapper/main-content/profile.vue
+++ b/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" >
diff --git a/resources/assets/js/services/playback.js b/resources/assets/js/services/playback.js
index cb79030c..84b9b7db 100644
--- a/resources/assets/js/services/playback.js
+++ b/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
       }
 
diff --git a/resources/assets/js/stores/preference.js b/resources/assets/js/stores/preference.js
index 273c5e2a..ea41ee7c 100644
--- a/resources/assets/js/stores/preference.js
+++ b/resources/assets/js/stores/preference.js
@@ -18,7 +18,8 @@ export const preferenceStore = {
     },
     artistsViewMode: null,
     albumsViewMode: null,
-    selectedPreset: -1
+    selectedPreset: -1,
+    transcodeOnMobile: false
   },
 
   /**
diff --git a/resources/assets/js/stores/song.js b/resources/assets/js/stores/song.js
index 21eb2558..f8b6b822 100644
--- a/resources/assets/js/stores/song.js
+++ b/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')}`
   },