Add CDN support

.env.example

@@ -28,10 +28,19 @@ APP_MAX_SCAN_TIME=600
 # See https://github.com/phanan/koel/wiki#streaming-music for more information.
 STREAMING_METHOD=php
 
+
 # If you want Koel to integrate with Last.fm, set the API details here.
 LASTFM_API_KEY=
 LASTFM_API_SECRET=
 
+# You can also configure Koel to use a CDN to serve the media files.
+# This url must be mapped to the home URL of your Koel's installation.
+# No trailing slash, please.
+CDN_URL=
+
+# The variables below are Laravel-specific. 
+# You can change them if you know what you're doing. Otherwise, just leave them as-is.
+
 CACHE_DRIVER=file
 SESSION_DRIVER=file
 QUEUE_DRIVER=sync

app/Http/Controllers/API/DataController.php

@@ -33,6 +33,7 @@ class DataController extends Controller
             'users' => auth()->user()->is_admin ? User::all() : [],
             'currentUser' => auth()->user(),
             'useLastfm' => env('LASTFM_API_KEY') && env('LASTFM_API_SECRET'),
+            'cdnUrl' => trim(env('CDN_URL'), '/ '),
             'currentVersion' => Application::VERSION,
             'latestVersion' => auth()->user()->is_admin ? app()->getLatestVersion() : Application::VERSION,
         ]);

resources/assets/js/components/site-footer/index.vue

@@ -26,7 +26,7 @@
                     </p>
 
                     <div class="player">
-                        <audio controls></audio>
+                        <audio crossorigin="anonymous" controls></audio>
                     </div>
                 </div>
             </div>

resources/assets/js/services/playback.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import $ from 'jquery';
 
+import sharedStore from '../stores/shared';
 import queueStore from '../stores/queue';
 import songStore from '../stores/song';
 import artistStore from '../stores/artist';
@@ -94,7 +95,7 @@ export default {
 
         // Set the song as the current song
         queueStore.current(song);
-        this.player.source(`/api/${song.id}/play?jwt-token=${ls.get('jwt-token')}`);
+        this.player.source(`${sharedStore.state.cdnUrl}/api/${song.id}/play?jwt-token=${ls.get('jwt-token')}`);
 
         // We'll just "restart" playing the song, which will handle notification, scrobbling etc.
         this.restart();
@@ -187,7 +188,7 @@ export default {
             i = 0;
         }
         
-        preferenceStore.set('repeatMode',  this.repeatModes[i]);
+        preferenceStore.set('repeatMode', this.repeatModes[i]);
     },
 
     /**

resources/assets/js/stores/shared.js

@@ -24,6 +24,7 @@ export default {
         useLastfm: false,
         currentVersion: '',
         latestVersion: '',
+        cdnUrl: '',
     },
 
     init(successCb = null, errorCb = null) {
@@ -63,5 +64,6 @@ export default {
         this.state.useLastfm = false;
         this.state.currentVersion = '';
         this.state.latestVersion = '';
+        this.state.cdnUrl = '';
     },
 };