#5 media player support ▶

qJake · Sep 19, 2019 · f19f81b · f19f81b
1 parent 6a0d50f
commit f19f81b
Show file tree

Hide file tree

Showing 15 changed files with 446 additions and 4 deletions.
diff --git a/HADotNet.CommandCenter/Controllers/MediaTileController.cs b/HADotNet.CommandCenter/Controllers/MediaTileController.cs
@@ -0,0 +1,55 @@
+
+using HADotNet.CommandCenter.Models.Config.Tiles;
+using HADotNet.CommandCenter.Services.Interfaces;
+using HADotNet.Core.Clients;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace HADotNet.CommandCenter.Controllers
+{
+    [Route("admin/media")]
+    public class MediaTileController : BaseTileController
+    {
+        public IConfigStore ConfigStore { get; }
+        public EntityClient EntityClient { get; }
+
+        public MediaTileController(IConfigStore configStore, EntityClient entityClient)
+        {
+            ConfigStore = configStore;
+            EntityClient = entityClient;
+        }
+
+        [Route("add/media")]
+        public async Task<IActionResult> Add()
+        {
+            ViewBag.Entities = (await EntityClient.GetEntities("media_player")).OrderBy(e => e).Select(e => new SelectListItem(e, e));
+            return View();
+        }
+
+        [Route("edit/media")]
+        public async Task<IActionResult> Edit([FromQuery] string name)
+        {
+            var config = await ConfigStore.GetConfigAsync();
+
+            var tile = config.Tiles.FirstOrDefault(t => t.Name == name);
+
+            ViewBag.Entities = (await EntityClient.GetEntities("media_player")).OrderBy(e => e).Select(e => new SelectListItem(e, e));
+
+            return View("Add", tile);
+        }
+
+        [HttpPost("add/media")]
+        public async Task<IActionResult> Save(MediaTile tile)
+        {
+            if (ModelState.IsValid)
+            {
+                return await SaveBaseTile(ConfigStore, tile);
+            }
+
+            ViewBag.Entities = (await EntityClient.GetEntities("media_player")).OrderBy(e => e).Select(e => new SelectListItem(e, e));
+            return View("Add", tile);
+        }
+    }
+}
diff --git a/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj b/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj
@@ -17,6 +17,7 @@
     <Content Remove="compilerconfig.json" />
     <Content Remove="wwwroot\js\tiles\camera.tile.ts" />
     <Content Remove="wwwroot\js\tiles\label.tile.ts" />
+    <Content Remove="wwwroot\js\tiles\media.tile.ts" />
     <Content Remove="wwwroot\js\tiles\person.tile.ts" />
     <Content Remove="wwwroot\js\tiles\scene.tile.ts" />
     <Content Remove="wwwroot\js\tiles\switch.tile.ts" />

diff --git a/HADotNet.CommandCenter/Models/Config/Tiles/MediaTile.cs b/HADotNet.CommandCenter/Models/Config/Tiles/MediaTile.cs
@@ -0,0 +1,43 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+using HADotNet.Core.Models;
+
+namespace HADotNet.CommandCenter.Models.Config.Tiles
+{
+    [TileType("media")]
+    [TileIcon(TileIconType.Material, "television-classic")]
+    public class MediaTile : BaseEntityTile
+    {
+        /// <summary>
+        /// Gets or sets the refresh rate for this tile, in seconds.
+        /// </summary>
+        [Display(Name = "Refresh Rate")]
+        [Range(1, 600, ErrorMessage = "Enter a value between 1 and 600.")]
+        public int RefreshRate { get; set; }
+
+        /// <summary>
+        /// Gets or sets the image crop mode for displaying the image.
+        /// </summary>
+        [Display(Name = "Image Crop Mode")]
+        public string ImageCropMode { get; set; }
+
+        /// <summary>
+        /// Gets or sets if we should show what's playing.
+        /// </summary>
+        [Display(Name = "Show Media Title")]
+        public bool ShowTitle { get; set; }
+
+        /// <summary>
+        /// Gets or sets if we should show the name of the entity.
+        /// </summary>
+        [Display(Name = "Show Entity Label")]
+        public bool ShowLabel { get; set; }
+
+        /// <summary>
+        /// Gets or sets the override label for this tile.
+        /// </summary>
+        [Display(Name = "Override Label")]
+        public string OverrideLabel { get; set; }
+
+    }
+}
diff --git a/HADotNet.CommandCenter/Views/AdminTile/AddTile.cshtml b/HADotNet.CommandCenter/Views/AdminTile/AddTile.cshtml
@@ -72,6 +72,15 @@
             <p>Entity types: <code>scene</code></p>
         </div>
     </a>
+    <a asp-action="Add" asp-controller="MediaTile" class="card">
+        <div class="content">
+            <div class="header"><span class="va-bottom @(new MediaTile().IconClassName)"></span> Media Tile</div>
+            <div class="description">A tile that displays the cover art and current media title for a media player.</div>
+        </div>
+        <div class="extra content">
+            <p>Entity types: <code>media_player</code></p>
+        </div>
+    </a>
 </div>
 
 <h2>Utility Tiles</h2>

diff --git a/HADotNet.CommandCenter/Views/MediaTile/Add.cshtml b/HADotNet.CommandCenter/Views/MediaTile/Add.cshtml
@@ -0,0 +1,115 @@
+@model MediaTile
+@{
+    ViewData["Title"] = (Model == null ? "Add" : "Edit") + " Tile: Media";
+}
+
+<h1><span class="va-top @(new CameraTile().IconClassName)"></span> @(Model == null ? "Add" : "Edit") Tile: Media</h1>
+
+<form class="ui form" method="post" asp-action="Save">
+    <input type="hidden" name="originalName" value="@Model?.Name" />
+    <div class="ui grid">
+        <div class="row">
+            <div class="six wide computer twelve wide tablet sixteen wide mobile column">
+                <h3>Basic Tile Info</h3>
+                <div class="ui segment">
+                    <div class="field">
+                        <label asp-for="Name"></label>
+                        <div class="ui left icon input">
+                            <i class="tag icon"></i>
+                            <input asp-for="Name" />
+                        </div>
+                        <span class="ui up pointing small red label" asp-validation-for="Name"></span>
+                        <p><small>An internal name to identify this tile, not shown on the dashboard.</small></p>
+                    </div>
+                    <div class="inline field">
+                        <label asp-for="SizeX"></label>
+                        <i class="arrows alternate horizontal icon"></i>
+                        <select class="ui dropdown" asp-for="SizeX">
+                            <option value="1">1x</option>
+                            <option value="2">2x</option>
+                            <option value="3">3x</option>
+                            <option value="4">4x</option>
+                        </select>
+                        <span class="ui up pointing small red label" asp-validation-for="SizeX"></span>
+                    </div>
+                    <div class="inline field">
+                        <label asp-for="SizeY"></label>
+                        <i class="arrows alternate vertical icon"></i>
+                        <select class="ui dropdown" asp-for="SizeY">
+                            <option value="1">1x</option>
+                            <option value="2">2x</option>
+                            <option value="3">3x</option>
+                            <option value="4">4x</option>
+                        </select>
+                        <span class="ui up pointing small red label" asp-validation-for="SizeY"></span>
+                    </div>
+                    <div class="field">
+                        <label asp-for="AdditionalCss"></label>
+                        <textarea asp-for="AdditionalCss"></textarea>
+                        <span class="ui up pointing small red label" asp-validation-for="AdditionalCss"></span>
+                        <p><small>Enter one or more CSS properties. Don't enclose them with <code>{ ... }</code>.</small></p>
+                    </div>
+                </div>
+                <h3>Camera Tile Details</h3>
+                <div class="ui segment">
+                    <div class="field">
+                        <label asp-for="EntityId"></label>
+                        <select class="ui search selection dropdown" asp-for="EntityId" asp-items="ViewBag.Entities"></select>
+                        <span class="ui up pointing small red label" asp-validation-for="EntityId"></span>
+                    </div>
+                    <div class="field">
+                        <label asp-for="RefreshRate"></label>
+                        <div class="ui left icon input">
+                            <i class="refresh icon"></i>
+                            <input asp-for="RefreshRate" />
+                        </div>
+                        <span class="ui up pointing small red label" asp-validation-for="RefreshRate"></span>
+                        <p><small>The rate, in seconds, to automatically refresh the camera image. Enter a value from 1 to 600.</small></p>
+                    </div>
+                    <div class="field">
+                        <label asp-for="ImageCropMode"></label>
+                        <select asp-for="ImageCropMode" class="ui dropdown">
+                            <option value="cover">Cover (Resize and Zoom to Fit)</option>
+                            <option value="contain">Contain (Resize Showing All with Borders)</option>
+                            <option value="stretch">Stretch Image to Fit</option>
+                        </select>
+                        <span class="ui up pointing small red label" asp-validation-for="ImageCropMode"></span>
+                        <p><small>Specify how the image should be displayed in the tile.</small></p>
+                    </div>
+                    <div class="field">
+                        <div class="ui checkbox">
+                            <input asp-for="ShowTitle" />
+                            <label asp-for="ShowTitle"></label>
+                        </div>
+                        <span class="ui up pointing small red label" asp-validation-for="ShowTitle"></span>
+                        <div><small>Whether or not to show the title of what's playing currently.</small></div>
+                    </div>
+                    <div class="field">
+                        <div class="ui checkbox">
+                            <input asp-for="ShowLabel" />
+                            <label asp-for="ShowLabel"></label>
+                        </div>
+                        <span class="ui up pointing small red label" asp-validation-for="ShowLabel"></span>
+                        <div><small>Whether or not to show the entity name.</small></div>
+                    </div>
+                    <div class="field">
+                        <label asp-for="OverrideLabel"></label>
+                        <div class="ui left icon input">
+                            <i class="font icon"></i>
+                            <input asp-for="OverrideLabel" />
+                        </div>
+                        <span class="ui up pointing small red label" asp-validation-for="OverrideLabel"></span>
+                        <p><small>By default, the entity's <em>friendly name</em> will be used. Enter an override if desired.</small></p>
+                    </div>
+
+                </div>
+                <div class="field">
+                    <button type="submit" class="ui green icon labeled button">
+                        <i class="@(Model == null ? "plus" : "save") icon"></i>
+                        @(Model == null ? "Add" : "Edit") Tile
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/HADotNet.CommandCenter/Views/Shared/Tiles/TileViewMedia.cshtml b/HADotNet.CommandCenter/Views/Shared/Tiles/TileViewMedia.cshtml
@@ -0,0 +1,6 @@
+@model TileWithLayoutViewModel
+
+<div id="[email protected]" data-tile-name="@Model.Tile.Name" data-tile-type="@Model.Tile.TypeProper" class="tile tile-loading [email protected]" style="left: @(Model.Layout.XPos)px; top: @(Model.Layout.YPos)px; width: @(Model.Tile.GetTileSizeX(ViewBag.BaseTileSizePx, ViewBag.TilePadding))px; height: @(Model.Tile.GetTileSizeY(ViewBag.BaseTileSizePx, ViewBag.TilePadding))px; @Model.Tile.AdditionalCss">
+    <span class="top-label" value-title></span>
+    <span class="bottom-label" value-name></span>
+</div>
diff --git a/HADotNet.CommandCenter/wwwroot/css/dashboard.css b/HADotNet.CommandCenter/wwwroot/css/dashboard.css
@@ -123,4 +123,18 @@ body.dashboard .tiles .tile.tile-loading:after {
 }
 .tile.tile-type--weather > span.value[value-summary] {
   font-size: 1.8em;
+}
+.tile.tile-type--media {
+  justify-content: space-between !important;
+}
+.tile.tile-type--media.media-idle {
+  background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.tile.tile-type--media span.top-label,
+.tile.tile-type--media span.bottom-label {
+  margin: 0.5em 0;
+  color: white;
+  font-weight: 600;
+  font-size: 1.4em;
+  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
 }
diff --git a/HADotNet.CommandCenter/wwwroot/css/dashboard.less b/HADotNet.CommandCenter/wwwroot/css/dashboard.less
@@ -177,4 +177,24 @@ body.dashboard
             font-size: 1.8em;
         }
     }
+
+    &.tile-type--media
+    {
+        justify-content: space-between !important;
+
+        &.media-idle
+        {
+            background-color: rgba(0,0,0,0.7) !important;
+        }
+
+        span.top-label,
+        span.bottom-label
+        {
+            margin: 0.5em 0;
+            color: white;
+            font-weight: 600;
+            font-size: 1.4em;
+            text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
+        }
+    }
 }
diff --git a/HADotNet.CommandCenter/wwwroot/css/dashboard.min.css b/HADotNet.CommandCenter/wwwroot/css/dashboard.min.css