diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js index 0e0ee8b..3b6106f 100644 --- a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js +++ b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Scripts/Directives/Videos.js @@ -246,6 +246,8 @@ return; } + item.loading = true; + $http.get('/umbraco/Skybrud/VideoPicker/GetVideoFromUrl?url=' + item.url).success(function (video) { if (video.type === "youtube" && scope.config.services.youtube === false) { @@ -278,8 +280,12 @@ } + item.loading = false; + }).error(function (r) { + item.loading = false; + item.type = null; item.details = null; diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css index a508f57..d66e403 100644 --- a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css +++ b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.css @@ -23,6 +23,15 @@ border: 1px dashed #d8d7d9; padding: 10px; margin-bottom: 10px; + position: relative; +} +.SkybrudVideoPicker .SkybrudVideoPickerItem.loading > .load-indicator { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(255, 255, 255, 0.75); } .SkybrudVideoPicker input[type=text] { box-sizing: border-box; diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less index 56661be..fd93294 100644 --- a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less +++ b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.less @@ -25,6 +25,15 @@ border: 1px dashed #d8d7d9; padding: 10px; margin-bottom: 10px; + position: relative; + &.loading > .load-indicator { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(255,255,255, 0.75); + } } input[type=text] { diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css index c1dea44..67a4832 100644 --- a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css +++ b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Styles/Styles.min.css @@ -1 +1 @@ -.SkybrudVideoPicker{max-width:66.6%;max-width:800px;}.SkybrudVideoPicker .umb-thumbnail .placeholder{display:block;box-sizing:border-box;background:#f3f3f5;width:320px;height:180px;line-height:180px;text-align:center;font-size:50px;}.SkybrudVideoPicker .umb-thumbnail a.placeholder{text-decoration:none;color:#817f85;}.SkybrudVideoPicker .umb-thumbnail a.placeholder:hover{color:#03bfb3;}.SkybrudVideoPicker .SkybrudVideoPickerItem{border:1px dashed #d8d7d9;padding:10px;margin-bottom:10px;}.SkybrudVideoPicker input[type=text]{box-sizing:border-box;width:100%;max-width:initial;line-height:32px;height:32px;}.SkybrudVideoPicker textarea{box-sizing:border-box;width:100%;max-width:initial;padding-top:5px;padding-bottom:5px;min-height:100px;resize:vertical;}.SkybrudVideoPicker .umb-thumbnail>div{position:relative;}.SkybrudVideoPicker .umb-thumbnail>div .actions{position:absolute;right:10px;bottom:10px;display:-ms-flexbox;display:flex;text-decoration:none;opacity:0;visibility:hidden;-ms-flex-direction:row;flex-direction:row;}.SkybrudVideoPicker .umb-thumbnail>div:hover .actions{opacity:1;visibility:visible;}.SkybrudVideoPicker .umb-thumbnail>div a.action{display:-ms-flexbox;display:flex;width:25px;height:25px;margin-left:5px;font-size:16px;color:#222;background:#fff;border-radius:15px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;}.SkybrudVideoPicker div.actions{line-height:32px;white-space:nowrap;margin-left:10px;}.SkybrudVideoPicker .option+.option{margin-top:15px;}.SkybrudVideoPicker .videopicker-add-link{display:-ms-flexbox;display:flex;padding:5px 15px;font-weight:bold;color:#2e8aea;border:1px dashed #d8d7d9;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;}.SkybrudVideoPicker.umbraco-gte76 .videopicker-add-link{color:#00aea2;}.SkybrudVideoPicker .videopicker-thumbnails{display:flex;flex-wrap:wrap;margin-top:-10px;}.SkybrudVideoPicker .videopicker-thumbnail{margin-top:10px;padding-right:10px;}.prevalue-title{font-size:15px;line-height:15px;color:#000;font-weight:bold;margin:0 0 5px 0;}.prevalue-description{font-size:12px;color:#817f85;}.prevalue-title+.SkybrudVideoPicker .option-group,.prevalue-description+.SkybrudVideoPicker .option-group{margin-top:20px;}.SkybrudVideoPicker .option-group .option-group-title{margin-bottom:20px;background:#f3f3f5;padding:5px 10px;font-weight:bold;border-bottom:1px solid #b2afbc;}.SkybrudVideoPicker .option-group .option{display:block;margin-left:20px;margin-right:20px;}.SkybrudVideoPicker .option-group .option>div{margin:0 0 5px 0;}.SkybrudVideoPicker .option-group .option small{padding:0;}.SkybrudVideoPicker .option-group .option+.option{margin-top:15px;}.SkybrudVideoPicker .option-group .option input.placeholder{width:100%;}.SkybrudVideoPicker .option-group+.option-group{margin-top:40px;}.umb-control.-active .SkybrudVideoPicker{padding:10px;}.SkybrudVideoPicker .videopicker-twentythree .umb-thumbnail .placeholder{width:300px;height:158px;line-height:158px;} \ No newline at end of file +.SkybrudVideoPicker{max-width:66.6%;max-width:800px;}.SkybrudVideoPicker .umb-thumbnail .placeholder{display:block;box-sizing:border-box;background:#f3f3f5;width:320px;height:180px;line-height:180px;text-align:center;font-size:50px;}.SkybrudVideoPicker .umb-thumbnail a.placeholder{text-decoration:none;color:#817f85;}.SkybrudVideoPicker .umb-thumbnail a.placeholder:hover{color:#03bfb3;}.SkybrudVideoPicker .SkybrudVideoPickerItem{border:1px dashed #d8d7d9;padding:10px;margin-bottom:10px;position:relative;}.SkybrudVideoPicker .SkybrudVideoPickerItem.loading>.load-indicator{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,255,255,.75);}.SkybrudVideoPicker input[type=text]{box-sizing:border-box;width:100%;max-width:initial;line-height:32px;height:32px;}.SkybrudVideoPicker textarea{box-sizing:border-box;width:100%;max-width:initial;padding-top:5px;padding-bottom:5px;min-height:100px;resize:vertical;}.SkybrudVideoPicker .umb-thumbnail>div{position:relative;}.SkybrudVideoPicker .umb-thumbnail>div .actions{position:absolute;right:10px;bottom:10px;display:-ms-flexbox;display:flex;text-decoration:none;opacity:0;visibility:hidden;-ms-flex-direction:row;flex-direction:row;}.SkybrudVideoPicker .umb-thumbnail>div:hover .actions{opacity:1;visibility:visible;}.SkybrudVideoPicker .umb-thumbnail>div a.action{display:-ms-flexbox;display:flex;width:25px;height:25px;margin-left:5px;font-size:16px;color:#222;background:#fff;border-radius:15px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;}.SkybrudVideoPicker div.actions{line-height:32px;white-space:nowrap;margin-left:10px;}.SkybrudVideoPicker .option+.option{margin-top:15px;}.SkybrudVideoPicker .videopicker-add-link{display:-ms-flexbox;display:flex;padding:5px 15px;font-weight:bold;color:#2e8aea;border:1px dashed #d8d7d9;box-sizing:border-box;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;}.SkybrudVideoPicker.umbraco-gte76 .videopicker-add-link{color:#00aea2;}.SkybrudVideoPicker .videopicker-thumbnails{display:flex;flex-wrap:wrap;margin-top:-10px;}.SkybrudVideoPicker .videopicker-thumbnail{margin-top:10px;padding-right:10px;}.prevalue-title{font-size:15px;line-height:15px;color:#000;font-weight:bold;margin:0 0 5px 0;}.prevalue-description{font-size:12px;color:#817f85;}.prevalue-title+.SkybrudVideoPicker .option-group,.prevalue-description+.SkybrudVideoPicker .option-group{margin-top:20px;}.SkybrudVideoPicker .option-group .option-group-title{margin-bottom:20px;background:#f3f3f5;padding:5px 10px;font-weight:bold;border-bottom:1px solid #b2afbc;}.SkybrudVideoPicker .option-group .option{display:block;margin-left:20px;margin-right:20px;}.SkybrudVideoPicker .option-group .option>div{margin:0 0 5px 0;}.SkybrudVideoPicker .option-group .option small{padding:0;}.SkybrudVideoPicker .option-group .option+.option{margin-top:15px;}.SkybrudVideoPicker .option-group .option input.placeholder{width:100%;}.SkybrudVideoPicker .option-group+.option-group{margin-top:40px;}.umb-control.-active .SkybrudVideoPicker{padding:10px;}.SkybrudVideoPicker .videopicker-twentythree .umb-thumbnail .placeholder{width:300px;height:158px;line-height:158px;} \ No newline at end of file diff --git a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html index 97da68c..e99f870 100644 --- a/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html +++ b/src/Skybrud.VideoPicker/App_Plugins/Skybrud.VideoPicker/Views/VideosDirective.html @@ -1,8 +1,11 @@ 
-