feat: MediaElement Js plugin for Video and Audio controls

Support for MediaElement Js plugin for Video and Audio controls

Childrens-Social-Care-CPD-Tests/Contentful/EntityResolverTests.cs

@@ -14,6 +14,7 @@ public class EntityResolverTests
     [TestCase("areaOfPracticeList", typeof(AreaOfPracticeList))]
     [TestCase("applicationFeature", typeof(ApplicationFeature))]
     [TestCase("applicationFeatures", typeof(ApplicationFeatures))]
+    [TestCase("audioResource", typeof(AudioResource))]
     [TestCase("columnLayout", typeof(ColumnLayout))]
     [TestCase("content", typeof(Content))]
     [TestCase("contentLink", typeof(ContentLink))]

Childrens-Social-Care-CPD-Tests/Contentful/PartialsFactoryTests.cs

@@ -13,6 +13,7 @@ public partial class PartialsFactoryTests
     {
         new object[] { new AreaOfPractice(), "_AreaOfPractice" },
         new object[] { new AreaOfPracticeList(), "_AreaOfPracticeList" },
+         new object[] { new AudioResource(), "_AudioResource" },
         new object[] { new ColumnLayout(), "_ColumnLayout" },
         new object[] { new Content(), "_Content" },
         new object[] { new ContentLink(), "_ContentLink" },

Childrens-Social-Care-CPD/Childrens-Social-Care-CPD.csproj

@@ -21,7 +21,6 @@
   <ItemGroup>
     <Folder Include="Properties\" />
     <Folder Include="wwwroot\assets\images\moj\" />
-    <Folder Include="wwwroot\css\" />
   </ItemGroup>
   <ItemGroup>
     <Content Update="Views\Shared\_Footer.cshtml">

Childrens-Social-Care-CPD/Contentful/EntityResolver.cs

@@ -17,6 +17,7 @@ public Type Resolve(string contentTypeId)
             "areaOfPracticeList" => typeof(AreaOfPracticeList),
             "applicationFeature" => typeof(ApplicationFeature),
             "applicationFeatures" => typeof(ApplicationFeatures),
+            "audioResource" => typeof(AudioResource),
             "columnLayout" => typeof(ColumnLayout),
             "content" => typeof(Content),
             "contentLink" => typeof(ContentLink),

Childrens-Social-Care-CPD/Contentful/Models/AudioResource.cs

@@ -0,0 +1,10 @@
+using Contentful.Core.Models;
+
+namespace Childrens_Social_Care_CPD.Contentful.Models;
+
+public class AudioResource : IContent
+{
+    public string Id { get; set; }
+    public Asset Audio { get; set; }
+    public Document Transcript {  get; set; }
+}

Childrens-Social-Care-CPD/Contentful/PartialsFactory.cs

@@ -16,6 +16,7 @@ public static string GetPartialFor(IContent item)
         {
             AreaOfPractice => "_AreaOfPractice",
             AreaOfPracticeList => "_AreaOfPracticeList",
+            AudioResource => "_AudioResource",
             ColumnLayout => "_ColumnLayout",
             Content => "_Content",
             ContentLink => "_ContentLink",

Childrens-Social-Care-CPD/Controllers/ContentController.cs

@@ -52,15 +52,16 @@ public async Task<IActionResult> Index(CancellationToken cancellationToken, stri
         }
 
         var contextModel = new ContextModel(
-            Id: pageContent.Id, 
-            Title: pageContent.Title, 
-            PageName: pageName, 
+            Id: pageContent.Id,
+            Title: pageContent.Title,
+            PageName: pageName,
             Category: pageContent.Category,
-            UseContainers: pageContent.SideMenu == null, 
-            PreferenceSet: preferenceSet, 
+            UseContainers: pageContent.SideMenu == null,
+            PreferenceSet: preferenceSet,
             BackLink: pageContent.BackLink);
 
         ViewData["ContextModel"] = contextModel;
+        ViewData["StateModel"] = new StateModel();
         return View(pageContent);
     }
 }

Childrens-Social-Care-CPD/Models/StateModel.cs

@@ -0,0 +1,6 @@
+namespace Childrens_Social_Care_CPD.Models;
+
+public class StateModel
+{
+    public bool IncludeMediaPlayer { get; set; } = false;
+}

Childrens-Social-Care-CPD/Views/Content/Index.cshtml

@@ -33,10 +33,26 @@
 @section SideMenu {
     @if (Model.SideMenu != null)
     {
-        <partial name="_SideMenu" model="Model.SideMenu"/>
+        <partial name="_SideMenu" model="Model.SideMenu" />
     }
 }
 
 <partial name="_Content" model="Model" />
 
-@_relatedContentRenderer.Render(Model.RelatedContent)
+@_relatedContentRenderer.Render(Model.RelatedContent)
+
+@section Scripts {
+    @if (ViewData.TryGetValue("StateModel", out var stateModel) && ((StateModel)stateModel).IncludeMediaPlayer)
+    {
+        <script src=/javascript/mediaelement-and-player.min.js></script>
+        <script src=/javascript/mediaelement-configuration.js></script>
+    }
+}
+
+@section Head {
+    @if (ViewData.TryGetValue("StateModel", out var stateModel) && ((StateModel)stateModel).IncludeMediaPlayer)
+    {
+
+        <link href="/css/mediaelement-player.min.css" rel="stylesheet" />
+    }
+}

Childrens-Social-Care-CPD/Views/Resources/Search.cshtml

@@ -7,10 +7,6 @@
     Layout = "_SearchPageLayout";
 }
 
-@section Scripts {
-    <script src="/javascript/resources.js"></script>
-}
-
 @section PageBanner {
     <partial name="_PageBanner" model="Model.Content" />
 }

Childrens-Social-Care-CPD/Views/Shared/_AudioResource.cshtml

@@ -0,0 +1,27 @@
+@using Childrens_Social_Care_CPD.Contentful.Models;
+
+@model AudioResource
+
+@{
+    ((StateModel)ViewData["StateModel"]).IncludeMediaPlayer = true;
+}
+
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-three-quarters">
+        <audio id="audioPlayer" preload="none">
+            <source src="@Model.Audio.File.Url" type="audio/mp3">
+        </audio>
+        @if (Model.Transcript.Content != null)
+        {
+            <details class="govuk-details govuk-!-margin-top-3" data-module="govuk-details">
+                <summary class="govuk-details__summary"> <span class="govuk-details__summary-text">View transcript  </span></summary>
+                <div class="govuk-details__text">
+                    @{
+                        await Html.RenderPartialAsync("_RichText", Model.Transcript);
+                    }
+                </div>
+            </details>
+        }
+    </div>
+</div>
+

Childrens-Social-Care-CPD/Views/Shared/_DefaultPageLayout.cshtml

@@ -7,6 +7,15 @@
     @await RenderSectionAsync("PageBanner", required: false)
 }
 
+@section Scripts {
+    @await RenderSectionAsync("Scripts", required: false)
+}
+
+@section Head {
+    @await RenderSectionAsync("Head", required: false)
+}
+
+
 @await RenderSectionAsync("Hero", required: false)
 <div class="dfe-width-container">
     @RenderBody()

Childrens-Social-Care-CPD/Views/Shared/_SiteLayout.cshtml

@@ -10,6 +10,7 @@
     {
         <partial name="_GoogleAnalyticsPartial" />
     }
+    @await RenderSectionAsync("Head", required: false);
 
     <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="~/assets/images/favicon.ico" type="image/x-icon">
 </head>

Childrens-Social-Care-CPD/Views/Shared/_SubPageLayout.cshtml

@@ -7,6 +7,14 @@
     @await RenderSectionAsync("PageBanner", required: false)
 }
 
+@section Scripts {
+    @await RenderSectionAsync("Scripts", required: false)
+}
+
+@section Head {
+    @await RenderSectionAsync("Head", required: false)
+}
+
 <div class="govuk-width-container dfe-width-container">
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-one-quarter">

Childrens-Social-Care-CPD/Views/Shared/_VideoResource.cshtml

@@ -2,9 +2,15 @@
 
 @model VideoResource
 
+@{
+    ((StateModel)ViewData["StateModel"]).IncludeMediaPlayer = true;
+}
+
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
-        <iframe id="player" title="video" type="text/html" class="iframe-border-width" width="640" height="390" allowfullscreen src="@Model.Video.File.Url"></iframe>
+        <video id="videoPlayer" preload="none">
+            <source src="@Model.Video.File.Url">
+        </video>
         <details class="govuk-details govuk-!-margin-top-3" data-module="govuk-details">
             <summary class="govuk-details__summary"> <span class="govuk-details__summary-text">View transcript  </span></summary>
             <div class="govuk-details__text">