From e180ca28b5e2d25ee03bb9c98419344415e2a89c Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sun, 30 Jan 2022 13:21:12 +0300
Subject: [PATCH] Single screen prop

---
 README.md                        | 22 +++++++++++-----------
 bundle/vue-three-d-mockup.esm.js | 11 ++++-------
 src/Demo.vue                     |  4 ++--
 src/Mockup.vue                   | 11 ++++-------
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index b782c2f..fd8ea32 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ $ npm install github:anatolykopyl/vue-three-d-mockup
 
 ```html
 <Mockup 
-  screenImg="screen.png"
+  screen="screen.png"
 />
 ```
 
@@ -42,19 +42,19 @@ export default {
 </script>
 ```
 
-### props:
-
-- `screenImg`: path to image that will be displayed on the phones screen
-- `video`: the video element displayed on the phones screen. When using this option there are caveats, watch below
-- `lightClr`: color of the light
-- `phoneClr`: color of the phone
-- `rotation`: object with x, y and z rotation values
+| Prop       | Type               | Required | Default                        | Description                                                                                                                                                              |
+|------------|--------------------|----------|--------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `screen`   | String  \| Element | `true`   | none                           | Path an image that will be displayed on the phones screen or the  `<video>`  element displayed on the phones screen. When using the latter there are caveats, see below. |
+| `lightClr` | String             | `false`  | `"white"`                      | Color of the light as a CSS-style string.                                                                                                                                |
+| `phoneClr` | String             | `false`  | `"white"`                      | Color of the phone as a CSS-style string.                                                                                                                                |
+| `rotation` | Object             | `false`  | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes.                                                                                            |
 
 ### Caveats:
 
-- The `video` prop is unreactive, so when using it it's important to 
-only render the `Mockup` element when the video is loaded. Check out 
-[Demo.vue](src/Demo.vue) to see an example of how to do this.
+- The `screen` prop is unreactive, so when using it as a video 
+it's important to only render the `Mockup` element when the video 
+is loaded. Check out [Demo.vue](src/Demo.vue) to see an example of how 
+to do this.
 - The video on the model will not be shown if the original `<video>` 
 element is hidden with `display: none`, so use `visibility: hidden` 
 instead. 
diff --git a/bundle/vue-three-d-mockup.esm.js b/bundle/vue-three-d-mockup.esm.js
index 3676ccd..077eca1 100644
--- a/bundle/vue-three-d-mockup.esm.js
+++ b/bundle/vue-three-d-mockup.esm.js
@@ -128,10 +128,7 @@ var phoneObj = "data:model/obj;base64,IyAzZHMgTWF4IFdhdmVmcm9udCBPQkogRXhwb3J0ZX
 var script = {
   name: 'Mockup',
   props: {
-    screenImg: {
-      type: String,
-    },
-    video: {
+    screen: {
       type: null,
     },
     lightClr: {
@@ -185,11 +182,11 @@ var script = {
 
           let texture;
 
-          if (props.screenImg) {
+          if (typeof props.screen === 'string') {
             const loader = new THREE.TextureLoader();
-            texture = loader.load(props.screenImg);
+            texture = loader.load(props.screen);
           } else {
-            texture = new THREE.VideoTexture(props.video);
+            texture = new THREE.VideoTexture(props.screen);
           }
 
           texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
diff --git a/src/Demo.vue b/src/Demo.vue
index 27e3079..bfbff27 100644
--- a/src/Demo.vue
+++ b/src/Demo.vue
@@ -7,11 +7,11 @@
       <Mockup
         v-if="vidReady"
         class="mockup"
-        :video="$refs.video"
+        :screen="$refs.video"
       />
       <Mockup
         class="mockup"
-        screenImg="screen.png"
+        screen="screen.png"
         :rotation="{
           x: -0.2,
           y: -0.3,
diff --git a/src/Mockup.vue b/src/Mockup.vue
index bf60341..92a655c 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -19,10 +19,7 @@ import phoneObj from './assets/iphone.obj';
 export default {
   name: 'Mockup',
   props: {
-    screenImg: {
-      type: String,
-    },
-    video: {
+    screen: {
       type: null,
     },
     lightClr: {
@@ -76,11 +73,11 @@ export default {
 
           let texture;
 
-          if (props.screenImg) {
+          if (typeof props.screen === 'string') {
             const loader = new THREE.TextureLoader();
-            texture = loader.load(props.screenImg);
+            texture = loader.load(props.screen);
           } else {
-            texture = new THREE.VideoTexture(props.video);
+            texture = new THREE.VideoTexture(props.screen);
           }
 
           texture.anisotropy = renderer.capabilities.getMaxAnisotropy();