Added video description to the property editor

limbo-works · May 22, 2023 · 9030e3e · 9030e3e
1 parent 68ea09f
commit 9030e3e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Scripts/Controllers/Video.js b/src/Limbo.Umbraco.YouTube/wwwroot/Scripts/Controllers/Video.js
@@ -88,14 +88,16 @@
 
         if (!rawVideoData) {
             vm.videoId = null;
-            vm.title = null,
+            vm.title = null;
+            vm.description = null;
             vm.duration = null;
             vm.thumbnail = null;
             return;
         }
 
         vm.videoId = rawVideoData.id;
-        vm.title = rawVideoData.snippet?.title,
+        vm.title = rawVideoData.snippet?.title;
+        vm.description = rawVideoData.snippet?.description;
         vm.duration = rawVideoData.contentDetails?.duration;
         vm.thumbnail = youTubeService.getThumbnail(rawVideoData);
 

diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.css
@@ -13,10 +13,12 @@
 }
 .youtube-video input {
   width: 100%;
+  max-width: 1100px;
   flex: 1;
 }
 .youtube-video textarea {
   width: 100%;
+  max-width: 1100px;
   flex: 1;
   min-height: 110px;
   resize: vertical;
@@ -45,7 +47,7 @@
   border: 1px solid #e9e9eb;
   border-radius: 3px;
   padding: 12px 15px;
-  max-width: 800px;
+  max-width: 1100px;
   box-sizing: border-box;
   flex-wrap: wrap;
   gap: 20px 15px;
@@ -75,6 +77,13 @@
 .youtube-video-info {
   flex: 1;
 }
+.youtube-video-description {
+  margin-top: 15px;
+  white-space: pre-wrap;
+  color: #333;
+  line-height: 20px;
+  font-size: 14px;
+}
 .youtube-video pre {
   display: none;
   font-size: 10px;

diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less b/src/Limbo.Umbraco.YouTube/wwwroot/Styles/Default.less
@@ -99,6 +99,14 @@
         flex: 1;
     }
 
+    &-description {
+        margin-top: 15px;
+        white-space: pre-wrap;
+        color: #333;
+        line-height: 20px;
+        font-size: 14px;
+    }
+
     pre {
         display: none;
         font-size: 10px;

diff --git a/src/Limbo.Umbraco.YouTube/wwwroot/Views/Video.html b/src/Limbo.Umbraco.YouTube/wwwroot/Views/Video.html
@@ -36,6 +36,7 @@ <h5><localize key="limboYouTube_video">Video</localize></h5>
                         </td>
                     </tr>
                 </table>
+                <div ng-if="vm.description" class="youtube-video-description">{{vm.description}}</div>
             </div>
         </div>
     </div>