API endpoint which streams a media file by supplying the media id

zero.Core/Api/MediaApi.cs

@@ -8,7 +8,13 @@ namespace zero.Core.Api
 {
   public class MediaApi : AppAwareBackofficeApi, IMediaApi
   {
-    public MediaApi(IBackofficeStore store) : base(store) { }
+    protected IPaths Paths { get; private set; }
+
+
+    public MediaApi(IBackofficeStore store, IPaths paths) : base(store)
+    {
+      Paths = paths;
+    }
 
 
     /// <inheritdoc />
@@ -18,6 +24,20 @@ namespace zero.Core.Api
     }
 
 
+    /// <inheritdoc />
+    public async Task<string> GetSourceById(string id, bool thumb = false)
+    {
+      Media media = await GetById(id);
+
+      if (media == null)
+      {
+        return null;
+      }
+
+      return media.ThumbnailSource ?? media.Source;
+    }
+
+
     /// <inheritdoc />
     public async Task<Dictionary<string, Media>> GetById(IEnumerable<string> ids)
     {
@@ -73,6 +93,11 @@ namespace zero.Core.Api
     /// </summary>
     Task<Media> GetById(string id);
 
+    /// <summary>
+    /// Get media source by Id
+    /// </summary>
+    Task<string> GetSourceById(string id, bool thumb = false);
+
     /// <summary>
     /// Get media by ids
     /// </summary>

zero.Web.UI/App/navigation.vue

@@ -173,10 +173,7 @@
 
         if (user && user.avatarId)
         {
-          MediaApi.getById(user.avatarId).then(res =>
-          {
-            this.userAvatar = res.entity.source;
-          });
+          this.userAvatar = MediaApi.getImageSource(user.avatarId);
         }
         else
         {

zero.Web.UI/App/pages/settings/users.vue

@@ -29,6 +29,7 @@
   import AuthApi from 'zero/services/auth.js'
   import UserRolesApi from 'zero/resources/userRoles.js';
   import UsersApi from 'zero/resources/users.js';
+  import MediaApi from 'zero/resources/media.js';
   import { filter as _filter, map as _map } from 'underscore';
 
   export default {
@@ -51,7 +52,7 @@
           avatar: {
             label: '',
             as: 'html',
-            render: item => `<img src="${item.avatar}" class="users-list-avatar">`,
+            render: item => `<img src="${MediaApi.getImageSource(item.avatarId)}" class="users-list-avatar">`,
             width: 70,
             link: this.getUserLink,
             sort: false

zero.Web.UI/App/resources/media.js

@@ -28,6 +28,16 @@ export default {
     return Axios.get(base + 'getAll', { params: query }).then(res => Promise.resolve(res.data));
   },
 
+  // get path to thumbnail source
+  getImageSource(id)
+  {
+    if (!id)
+    {
+      return null;
+    }
+    return base + 'streamThumbnail/' + id;
+  },
+
   // save a media
   save(model)
   {

zero.Web/Controllers/MediaController.cs

@@ -1,7 +1,9 @@
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.StaticFiles;
 using System;
 using System.Collections.Generic;
+using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
 using zero.Core.Api;
@@ -100,5 +102,29 @@ namespace zero.Web.Controllers
     {
       return await As<Media, MediaEditModel>(await Api.Delete(id));
     }
+
+
+    /// <summary>
+    /// Streams a media thumbnail by id
+    /// </summary>
+    [HttpGet]
+    public async Task<IActionResult> StreamThumbnail(string id)
+    {
+      string path = await Api.GetSourceById(id, true);
+
+      if (path == null)
+      {
+        return NotFound();
+      }
+
+      var provider = new FileExtensionContentTypeProvider();
+      string contentType;
+      if (!provider.TryGetContentType(Path.GetFileName(path), out contentType))
+      {
+        contentType = "application/octet-stream";
+      }
+
+      return File(path, contentType);
+    }
   }
 }