[Media UI] Renamed play-cache event to play-with-opts.

As we're likely to add more play options in the future, this approach is
much more scalable.

platypush/backend/http/webapp/src/components/panels/Media/Browser.vue

@@ -22,6 +22,7 @@
             :is="mediaProvider"
             :filter="filter"
             :loading="loading"
+            :media-plugin="mediaPlugin"
             :selected-playlist="selectedPlaylist"
             :selected-channel="selectedChannel"
             @add-to-playlist="$emit('add-to-playlist', $event)"
@@ -30,7 +31,7 @@
             @download-audio="$emit('download-audio', $event)"
             @path-change="$emit('path-change', $event)"
             @play="$emit('play', $event)"
-            @play-cache="$emit('play-cache', $event)"
+            @play-with-opts="$emit('play-with-opts', $event)"
         />
       </div>
     </div>
@@ -53,7 +54,7 @@ export default {
     'download-audio',
     'path-change',
     'play',
-    'play-cache',
+    'play-with-opts',
     'remove-from-playlist',
     'remove-playlist',
     'rename-playlist',
@@ -69,6 +70,10 @@ export default {
       default: '',
     },
 
+    mediaPlugin: {
+      type: String,
+    },
+
     selectedPlaylist: {
       type: Object,
     },

platypush/backend/http/webapp/src/components/panels/Media/Index.vue

@@ -59,7 +59,7 @@
                        @open-channel="selectChannelFromItem"
                        @select="onResultSelect($event)"
                        @play="play"
-                       @play-cache="play($event, {cache: true})"
+                       @play-with-opts="play($event.item, $event.opts)"
                        @view="view"
                        @download="download"
                        @download-audio="downloadAudio"
@@ -81,6 +81,7 @@
 
               <Browser :filter="browserFilter"
                        :loading="loading"
+                       :media-plugin="pluginName"
                        :selected-playlist="selectedPlaylist"
                        :selected-channel="selectedChannel"
                        @add-to-playlist="addToPlaylistItem = $event"
@@ -89,7 +90,7 @@
                        @download-audio="downloadAudio"
                        @path-change="browserFilter = ''"
                        @play="play($event)"
-                       @play-cache="play($event, {cache: true})"
+                       @play-with-opts="play($event.item, $event.opts)"
                        v-else-if="selectedView === 'browser'"
               />
             </div>
@@ -133,7 +134,7 @@
                 @download-audio="downloadAudio"
                 @open-channel="selectChannelFromItem"
                 @play="play"
-                @play-cache="play($event, {cache: true})"
+                @play-with-opts="play($event.item, $event.opts)"
           />
         </Modal>
       </div>

platypush/backend/http/webapp/src/components/panels/Media/Info.vue

@@ -6,7 +6,7 @@
               @add-to-playlist="$emit('add-to-playlist', item)"
               @open-channel="$emit('open-channel', item)"
               @play="$emit('play', item)"
-              @play-cache="$emit('play-cache', item)"
+              @play-with-opts="$emit('play-with-opts', $event)"
               @download="$emit('download', item)"
               @download-audio="$emit('download-audio', item)"
         />
@@ -191,7 +191,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
   ],
   props: {
     item: {

platypush/backend/http/webapp/src/components/panels/Media/Item.vue

@@ -15,7 +15,8 @@
           <Dropdown title="Actions" icon-class="fa fa-ellipsis-h" ref="dropdown">
             <DropdownItem icon-class="fa fa-play" text="Play" @input="$emit('play')"
                           v-if="item.type !== 'torrent'" />
-            <DropdownItem icon-class="fa fa-play" text="Play (With Cache)" @input="$emit('play-cache')"
+            <DropdownItem icon-class="fa fa-play" text="Play (With Cache)"
+                          @input="$emit('play-with-opts', {item: item, opts: {cache: true}})"
                           v-if="item.type === 'youtube'" />
             <DropdownItem icon-class="fa fa-download" text="Download" @input="$emit('download')"
                           v-if="(item.type === 'torrent' || item.type === 'youtube') && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
@@ -62,7 +63,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
     'remove-from-playlist',
     'select',
     'view',

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue

@@ -14,7 +14,7 @@
               @download-audio="$emit('download-audio', $event)" 
               @open-channel="selectChannelFromItem"
               @play="$emit('play', $event)"
-              @play-cache="$emit('play-cache', $event)"
+              @play-with-opts="$emit('play-with-opts', $event)"
               v-if="selectedView === 'feed'"
         />
 
@@ -26,7 +26,7 @@
                    @download-audio="$emit('download-audio', $event)"
                    @open-channel="selectChannelFromItem"
                    @play="$emit('play', $event)"
-                   @play-cache="$emit('play-cache', $event)"
+                   @play-with-opts="$emit('play-with-opts', $event)"
                    @remove-from-playlist="removeFromPlaylist"
                    @select="onPlaylistSelected"
                    v-else-if="selectedView === 'playlists'"
@@ -39,7 +39,7 @@
                        @download="$emit('download', $event)"
                        @download-audio="$emit('download-audio', $event)"
                        @play="$emit('play', $event)"
-                       @play-cache="$emit('play-cache', $event)"
+                       @play-with-opts="$emit('play-with-opts', $event)"
                        @select="onChannelSelected"
                        v-else-if="selectedView === 'subscriptions'"
         />
@@ -73,6 +73,15 @@ export default {
     Subscriptions,
   },
 
+  emits: [
+    'add-to-playlist',
+    'back',
+    'download',
+    'download-audio',
+    'play',
+    'play-with-opts',
+  ],
+
   data() {
     return {
       youtubeConfig: null,

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue

@@ -51,7 +51,7 @@
                @download-audio="$emit('download-audio', $event)"
                @open-channel="$emit('open-channel', $event)"
                @play="$emit('play', $event)"
-               @play-cache="$emit('play-cache', $event)"
+               @play-with-opts="$emit('play-with-opts', $event)"
                @scroll-end="loadNextPage"
                @select="selectedResult = $event"
       />
@@ -72,7 +72,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
   ],
 
   components: {

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue

@@ -15,7 +15,7 @@
              @open-channel="$emit('open-channel', $event)"
              @select="selectedResult = $event"
              @play="$emit('play', $event)"
-             @play-cache="$emit('play-cache', $event)"
+             @play-with-opts="$emit('play-with-opts', $event)"
              v-else />
   </div>
 </template>
@@ -34,7 +34,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
   ],
 
   components: {

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue

@@ -54,7 +54,7 @@
                @download-audio="$emit('download-audio', $event)"
                @open-channel="$emit('open-channel', $event)"
                @play="$emit('play', $event)"
-               @play-cache="$emit('play-cache', $event)"
+               @play-with-opts="$emit('play-with-opts', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
                @select="selectedResult = $event"
                v-else />
@@ -76,7 +76,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
     'remove-from-playlist',
   ],
 

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue

@@ -36,7 +36,7 @@
         @open-channel="$emit('open-channel', $event)"
         @remove-from-playlist="$emit('remove-from-playlist', {item: $event, playlist_id: selectedPlaylist.id})"
         @play="$emit('play', $event)"
-        @play-cache="$emit('play-cache', $event)"
+        @play-with-opts="$emit('play-with-opts', $event)"
       />
     </div>
 
@@ -118,7 +118,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
     'remove-from-playlist',
     'remove-playlist',
     'rename-playlist',

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue

@@ -27,7 +27,7 @@
         @download="$emit('download', $event)"
         @download-audio="$emit('download-audio', $event)"
         @play="$emit('play', $event)"
-        @play-cache="$emit('play-cache', $event)"
+        @play-with-opts="$emit('play-with-opts', $event)"
       />
     </div>
   </div>
@@ -46,7 +46,7 @@ export default {
     'download',
     'download-audio',
     'play',
-    'play-cache',
+    'play-with-opts',
     'select',
   ],
 

platypush/backend/http/webapp/src/components/panels/Media/Results.vue

@@ -13,7 +13,7 @@
             @remove-from-playlist="$emit('remove-from-playlist', item)"
             @select="$emit('select', i)"
             @play="$emit('play', item)"
-            @play-cache="$emit('play-cache', item)"
+            @play-with-opts="$emit('play-with-opts', $event)"
             @view="$emit('view', item)"
             @download="$emit('download', item)"
             @download-audio="$emit('download-audio', item)"
@@ -28,7 +28,7 @@
             @download-audio="$emit('download-audio', results[selectedResult])"
             @open-channel="$emit('open-channel', results[selectedResult])"
             @play="$emit('play', results[selectedResult])"
-            @play-cache="$emit('play-cache', results[selectedResult])"
+            @play-with-opts="$emit('play-with-opts', {...$event, item: results[selectedResult]})"
             v-if="selectedResult != null" />
     </Modal>
   </div>
@@ -48,7 +48,7 @@ export default {
     'download-audio',
     'open-channel',
     'play',
-    'play-cache',
+    'play-with-opts',
     'remove-from-playlist',
     'scroll-end',
     'select',