@sedoo/unidoo 0.0.76 → 0.0.79

package/package.json

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

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

@@ -1,25 +1,39 @@
 <template>
-  <v-col style="position: relative">
-    <div level-selector >
-
-     <level-selector
-        v-model="entries"
-        :data="data"
-      ></level-selector>
-
-    </div>
-    
-    <unidoo-simple-player
-      constrained
-      :label="label"
-      :entries="entries"
-    >
-      <template v-slot:customField>
-        <slot name="customField"></slot>    
-      </template>
-    </unidoo-simple-player>
-
-  </v-col>
+  <div>
+    <v-col container>
+      <div level-selector >
+
+      <level-selector
+          v-model="entries"
+          :data="data"
+        ></level-selector>
+
+      </div>
+
+      <unidoo-simple-player
+        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>
+  </div>
 </template>
 
 <script>
@@ -32,10 +46,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 +78,40 @@ 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;
+  [container]{
+    position: relative;
+  }
+
+  .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"

package/src/components/unidoo-player/unidoo-player-layout/UnidooPlayerLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div root>
+  <div>
 
     <div player-layout elevation="0" :class="{ zoomed: isZoomed }">
 
@@ -155,8 +155,8 @@ export default {
     },
 
     subBodyStyle(){
-      const vh = (this.isZoomed) ? '72vh' : '40vh';
-      return { gridTemplateRows: ((this.playerBarTop) ? '10px 140px 10px ' + vh + ' 10px' : '10px ' + vh + ' 10px 140px 10px')};
+      const vh = (this.isZoomed) ? '75vh' : '43vh';
+      return { gridTemplateRows: ((this.playerBarTop) ? '10px 120px 10px ' + vh + ' 10px' : '10px ' + vh + ' 10px 120px 10px')};
     }
 
   },