[0.1.1] [WIP-NEXT]

zlatnaspirala · Jul 29, 2020 · 7c274ed · 7c274ed
1 parent ac83a74
commit 7c274ed
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -107,3 +107,5 @@ npm i three ->
 ### VueTube web service 2020 ###
 
 https://maximumroulette.com:3000
+
+https://www.youtube.com/watch?v=-lwkKzFLzk0
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/vue-ts-starter/README.md b/vue-ts-starter/README.md
@@ -1,10 +1,22 @@
+
 # vue-ts-starter #
-## Project name: Vue project generator ##
+### Project name: Vue project generator ###
+
+#### First feature: YouTube vs Threejs ####
+#### version 0.0.5 ####
+#### Public access for VuleTube service: ####
+#### https://maximumroulette.com:3000 ####
+
+
+![vuletube](https://github.com/zlatnaspirala/vue-typescript-starter/blob/master/vue-ts-starter/public/assets/vule-logo1.png)
+
+Screenshot:
 
-## First feature: YouTube vs Threejs ##
-### Public access for VuleTube service: ###
-### https://maximumroulette.com:3000 ###
-![vuletube](https://github.com/zlatnaspirala/vue-typescript-starter/blob/master/vue-ts-starter/src/assets/vule-logo1.png)
+![screenshot](https://github.com/zlatnaspirala/vue-typescript-starter/blob/master/screenshot.jpg)
+
+YouTube presentation:
+
+![youtube link](https://www.youtube.com/watch?v=-lwkKzFLzk0)
 
   Production use `https` node application for web server.
 
@@ -34,6 +46,12 @@ Run:
 
 ### Features ###
 
+Note:
+```
+  0.0.x => any changes
+  0.x.1 ... n => any changes + updated present logic or new big feature.
+  x.1.1 ... n => release git/build point version.
+```
  <b>- version 0.0.2 [MASTER] </b>
 
   - Getting response for youtube search.
@@ -60,8 +78,10 @@ Run:
   - save result number per page - pagination.
   - show result in 3d
 
- <b> version 0.0.6 [WIP NEXT] </b>
+ <b> version 0.1.1 [WIP NEXT] </b>
 
+  - Adding paypal donate buttons
+  - Prevent raycast click event behind 3d plane video FIX@
   - Adding progress for video duration.
   - Adding webcam options
 

diff --git a/vue-ts-starter/public/index.html b/vue-ts-starter/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="google-site-verification" content="iXsCVpHVXDIPfO4hR8tkdGVO3AWNNQ7k_YAACd2qQ2g" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="https://www.paypal.com/sdk/js?client-id=AT1RiWCQ0vlgUA7ZC0Qnvu1p_pfqrD-AIYSRw0fAweI0FBJJgt1n4yiwhdxjEwMBWxaAIUFS8Ixu1vMc&currency=USD" data-sdk-integration-source="button-factory"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/vue-ts-starter/public/videos/list.html b/vue-ts-starter/public/videos/list.html
@@ -4,13 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>VIDEOS</title>
+    <title>ERROR PAGE</title>
   </head>
   <body>
     <noscript>
-
+      ERROR PAGE
     </noscript>
-    VIDEOS LIST
-    <div id="error"></div>
+    <div id="error">ERROR PAGE</div>
   </body>
 </html>
diff --git a/vue-ts-starter/src/App.vue b/vue-ts-starter/src/App.vue
@@ -2,7 +2,7 @@
 <template>
   <div id="app">
     <myHeader slogan='vuletube 0.4 local storage support added.' v-bind:switchPlaceA="this.switchPlaceAction" ></myHeader>
-    <div v-bind:style="styleObject">
+    <div ref="mybodycontent" v-bind:style="styleObject">
 
       <myYouTube v-if="switchPlace" ref="myYouTube" :arg="{ options: this.options }" ></myYouTube>
       <threejsYoutubePlayer v-else ref="myYouTubeThreejs" :arg="{ options: 'nikola' }" ></threejsYoutubePlayer>
@@ -72,7 +72,8 @@
      */
     $refs!: {
       myHeader: myHeader,
-      myYouTube: myYouTube
+      myYouTube: myYouTube,
+      mybodycontent: HTMLDivElement
     }
 
     /**
@@ -105,6 +106,7 @@
     /**
      * Switch place of two main components.
      * Youtube & webGLPlayer
+     * Better to remove from here ...
      */
     private switchPlace: boolean = false
 
@@ -188,6 +190,7 @@
 
     setupInstance = () => {
       console.log('Attach Application event this.count => ', this.$store.state.count)
+      console.log('Test Application refs mybodycontent => ', this.$refs.mybodycontent)
     }
 
     get computedMsg (): string {

diff --git a/vue-ts-starter/src/components/myHeader.vue b/vue-ts-starter/src/components/myHeader.vue
@@ -2,7 +2,6 @@
 <template>
   <div class="myHeader">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
     <md-menu md-size="medium" md-align-trigger>
       <md-button class="md-primary md-raised" md-menu-trigger>Start here</md-button>
       <md-menu-content>
@@ -79,6 +78,9 @@
               <span>- webgl-player.vue</span>
               <span>Open opengles port view, look for</span>
               <span>video source saved to the maximumroulette:3000</span>
+
+              <div id="paypal-button-container"></div>
+
               <span>This project is open source :</span>
               <a target="_blank" href="https://github.com/zlatnaspirala/vue-typescript-starter/blob/master/LICENSE">LICENCE</a>
               <a target="_blank" href="https://github.com/zlatnaspirala/vue-typescript-starter/">Download source code</a>
@@ -205,6 +207,32 @@
       this.$set(this, 'loginBtnVisibility', true)
       this.$set(this, 'switchThemeBtnLabel', 'myDark')
       console.log('Load theme Slogan is -> ' + this.$props.slogan)
+
+      /* test paypal
+              paypal.Buttons({
+      style: {
+          shape: 'rect',
+          color: 'blue',
+          layout: 'vertical',
+          label: 'paypal',
+
+      },
+      createOrder: function(data, actions) {
+          return actions.order.create({
+              purchase_units: [{
+                  amount: {
+                      value: '20'
+                  }
+              }]
+          });
+      },
+      onApprove: function(data, actions) {
+          return actions.order.capture().then(function(details) {
+              alert('Transaction completed by ' + details.payer.name.given_name + '!');
+          });
+      }
+  }).render('#paypal-button-container');
+  */
     }
 
   }