[Media UI] Added button to get the raw stream URL from youtube-dl compatible media.

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

@@ -1,8 +1,6 @@
 <template>
   <keep-alive>
     <div class="media-plugin fade-in">
-      <Loading v-if="loading" />
-
       <MediaView :plugin-name="pluginName" :status="selectedPlayer?.status || {}" :track="selectedPlayer?.status || {}"
                  :buttons="mediaButtons" @play="pause" @pause="pause" @stop="stop" @set-volume="setVolume"
                  @seek="seek" @search="search" @mute="toggleMute" @unmute="toggleMute">
@@ -38,6 +36,7 @@
               <Results :results="results"
                        :selected-result="selectedResult"
                        :sources="sources"
+                       :plugin-name="pluginName"
                        :loading="loading"
                        :filter="browserFilter"
                        @select="onResultSelect($event)"
@@ -81,7 +80,6 @@
 </template>
 
 <script>
-import Loading from "@/components/Loading";
 import Modal from "@/components/Modal";
 import Utils from "@/Utils";
 
@@ -101,7 +99,6 @@ export default {
   components: {
     Browser,
     Header,
-    Loading,
     MediaView,
     Modal,
     Nav,

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

@@ -16,6 +16,35 @@
       </div>
     </div>
 
+    <div class="row direct-url" v-if="directUrl">
+      <div class="left side">Direct URL</div>
+      <div class="right side">
+        <a :href="directUrl" title="Direct URL" target="_blank">
+          <i class="fas fa-external-link-alt" />
+        </a>
+        <button @click="copyToClipboard(directUrl)" title="Copy URL to clipboard">
+          <i class="fas fa-clipboard" />
+        </button>
+      </div>
+    </div>
+
+    <div class="row direct-url" v-else-if="item?.type === 'youtube' && item?.url">
+      <div class="left side">Direct URL</div>
+      <div class="right side">
+        <a :href="youtubeUrl" title="Direct URL" target="_blank" v-if="youtubeUrl">
+          <i class="fas fa-external-link-alt" />
+        </a>
+        <button @click="copyToClipboard(youtubeUrl)" title="Copy URL to clipboard" v-if="youtubeUrl">
+          <i class="fas fa-clipboard" />
+        </button>
+
+        <Loading v-if="loadingUrl" />
+        <button @click="getYoutubeUrl" title="Refresh direct URL" v-else>
+          <i class="fas fa-sync-alt" />
+        </button>
+      </div>
+    </div>
+
     <div class="row" v-if="item?.series">
       <div class="left side">TV Series</div>
       <div class="right side" v-text="item.series" />
@@ -156,25 +185,32 @@
 
 <script>
 import Utils from "@/Utils";
+import Loading from "@/components/Loading";
 import MediaUtils from "@/components/Media/Utils";
 import MediaImage from "./MediaImage";
 import Icons from "./icons.json";
 
 export default {
   name: "Info",
-  components: {MediaImage},
+  components: {Loading, MediaImage},
   mixins: [Utils, MediaUtils],
   emits: ['play'],
   props: {
     item: {
       type: Object,
       default: () => {},
-    }
+    },
+
+    pluginName: {
+      type: String,
+    },
   },
 
   data() {
     return {
       typeIcons: Icons,
+      loadingUrl: false,
+      youtubeUrl: null,
     }
   },
 
@@ -209,6 +245,35 @@ export default {
 
       return null
     },
+
+    directUrl() {
+      if (this.item?.type === 'file' && this.item?.url) {
+        const path = this.item.url.replace(/^file:\/\//, '')
+        return window.location.origin + '/file?path=' + encodeURIComponent(path)
+      }
+
+      return null
+    },
+  },
+
+  methods: {
+    async getYoutubeUrl() {
+      if (!(this.item?.type === 'youtube' && this.item?.url)) {
+        return null
+      }
+
+      try {
+        this.loadingUrl = true
+        this.youtubeUrl = await this.request(
+          `${this.pluginName}.get_youtube_url`,
+          {url: this.item.url},
+        )
+
+        return this.youtubeUrl
+      } finally {
+        this.loadingUrl = false
+      }
+    },
   },
 }
 </script>
@@ -280,6 +345,24 @@ export default {
   }
 }
 
+.direct-url {
+  .right.side {
+    position: relative;
+
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin-left: 1em;
+
+      &:hover {
+        color: $default-hover-fg;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
 .header {
   width: 100%;
   display: flex;

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

@@ -15,6 +15,7 @@
 
     <Modal ref="infoModal" title="Media info" @close="$emit('select', null)">
       <Info :item="results[selectedResult]"
+            :pluginName="pluginName"
             @play="$emit('play', results[selectedResult])"
             v-if="selectedResult != null" />
     </Modal>
@@ -36,6 +37,10 @@ export default {
       default: false,
     },
 
+    pluginName: {
+      type: String,
+    },
+
     results: {
       type: Array,
       default: () => [],
@@ -114,6 +119,7 @@ export default {
   width: 100%;
   height: 100%;
   background: $background-color;
+  position: relative;
 
   .grid {
     height: 100%;