@sedoo/unidoo 0.0.76 → 0.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.76",
+    "version": "0.0.77",
     "private": false,
     "scripts": {
         "build": "vue-cli-service build --target lib --name unidoo src/plugin.js",

package/src/components/unidoo-player/UnidooPlayer.vue

@@ -8,17 +8,29 @@
       ></level-selector>
 
     </div>
-    
+
     <unidoo-simple-player
-      constrained
+      v-if="hasData"
+      class="constrained"
       :label="label"
       :entries="entries"
     >
+
       <template v-slot:customField>
         <slot name="customField"></slot>    
       </template>
+
     </unidoo-simple-player>
 
+    <div v-else-if="noVisibleData" class="constrained placeholder">
+      <div style="position: absolute; top: 0; left: 0;"><slot name="customField"></slot></div><b>{{ noVisibleDataMessage }}</b>
+    </div>
+    
+    <div v-else class="constrained placeholder">
+      <div style="position: absolute; top: 0; left: 0;"><slot name="customField"></slot></div><b>{{ noDataMessage }}</b>
+    </div>
+
+    <div v-if="isLoading" mask></div>
   </v-col>
 </template>
 
@@ -32,10 +44,29 @@ export default {
       default: 'frame'
     },
 
-
     data:{
       type: Object,
       default: () => null
+    },
+
+    noVisibleData:{
+      type: Boolean,
+      default: false
+    },
+
+    noDataMessage:{
+      type: String,
+      default: "No available data"
+    },
+
+    noVisibleDataMessage:{
+      type: String,
+      default: "Existing data, no quicklook available"
+    },
+
+    isLoading:{
+      type: Boolean,
+      default: false
     }
   },
 
@@ -45,18 +76,36 @@ export default {
 
   computed:{
     hasData(){
-      return (this.data && this.data.entries && this.data.entries.length);
+      return this.data && this.data.entries && this.data.entries.length;
     },
   }
 
 }
 </script>
 <style scoped>
-  [constrained] {
-    display: block;
+  .constrained {
+    position: relative;
+    min-height: 15vh;
+  }
+
+  .placeholder{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
   }
 
   [level-selector]{
     margin: 0 10px;
   }
+
+  [mask]{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.5;
+    background: white;
+  }
 </style>

package/src/components/unidoo-player/level-selector/level-selector.vue

@@ -1,6 +1,6 @@
 <template>
   <div selector>
-    <v-col level-selector v-if="levels && data">
+    <v-col level-selector v-if="levels">
 
       <div style="display: flex; flex-wrap: wrap; margin: 0 -12px;" v-for="(key) in levelKeys"
         :key="key"