Vue/Typescript/Threejs project - search & play youtube videos in 3d webGL open source

vue-ts-starter
Project name: Vue project generator
First feature: YouTube vs Threejs
version 0.0.5
Public access for VuleTube service:
https://maximumroulette.com:3000
vuletube

Production use https node application for web server.

  git clone https://github.com/zlatnaspirala/vue-typescript-starter
  npm i

Other good solution is node serve for instant start.

Install:

  npm install -g serve

Run:

  serve -s dist
  // or
  npm run serve

Project details
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.

• version 0.0.2 [MASTER]

Getting response for youtube search.
Call server part for saving videos

• version 0.0.3 [MASTER]

Add options switch-place for two main components
Implement LocalStorageMemory class (For saving all user infly data - view options etc.)

• version 0.0.4 [MASTER]

Save current (exist) options with localStorage and load on refresh.
Every next options will be implemented with localStorage support.

• version 0.0.5 [MASTER]

Added new server module : npm install --save image-downloader
Prepare for search result preview in 3d. with raycast options for navigate. Add options for:
save result number per page - pagination.
show result in 3d
version 0.1.1 [WIP NEXT]

Adding paypal donate buttons
Prevent raycast click event behind 3d plane video FIX@
Adding progress for video duration.
Adding webcam options
Replace text with icons

## Project structure

├── dist/  (This is auto generated)
├── node_modules/  (This is auto generated)
├── public/
|   ├── assets/
|   |   └── logo.png
|   ├── thumbnails/
|   ├── videos/
|   |   └── list.html
|   ├── bad.html
|   ├── favicon.ico
|   ├── index.html
├── server/
|   ├── node_modules/ (This is auto generated)
|   ├── package.json
|   ├── package-lock.json
|   ├── server-connector.js
├── src/
|   ├── components/
|   |   ├── youtube-3d/
|   |   |   ├── myYouTube.vue
|   |   |   └── webgl-player.vue
|   |   ├── myFooter.vue
|   |   ├── myHeader.vue
|   ├── App.vue
|   └── styles/
|   |   └── styles.scss
|   ├── App.vue
|   ├── main.ts
|   ├── error-instance.ts
|   ├── shims-tsx.d.ts
|   ├── shims-vue.d.ts
|   └── store.ts
├── .gitignore
├── README.md (This file)
├── tsconfig.json
├── package.json
├── package-lock.json (This is auto generated)
└── babel.config.js

Components :

• myYouTube.vue Getting response for youtube search. Call server part for saving videos

• webgl-player.vue Open opengles port view, look for video source saved to the maximumroulette:3000 I use quick solution from npm: https://www.npmjs.com/package/youtube-dl
  

Response for youtube api v3 call search.
  body: "{↵  "kind": "youtube#searchListResponse",↵  "etag""
  headers: {cache-control: "private", content-encoding: "gzip",
  content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …}
  result: {
    kind: "youtube#searchListResponse",
    etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38",
    nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …}
  status: 200
  statusText: null
Result property:
{
"kind": "youtube#searchResult",
"etag": "mlweRndBtBgAcVC-11ZrL0oI7ok",
"id": {
  "kind": "youtube#video",
  "videoId": "YPhJOC9-M_M"
},
"snippet": {
  "publishedAt": "2019-07-14T19:27:31Z",
  "channelId": "UCc1NtMtvoVzKnOtnai9LGsA",
  "title": "Create game engine - Visual typescript game engine",
  "description": "Clone or download from : https://github.com/zlatnaspirala/visual-ts-game-engine Next video\
    developing in live - adding multiplayer feature. Project : Visual ts ...",
  "thumbnails": {
    "default": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/default.jpg", "width": 120, "height": 90
    },
    "medium": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/mqdefault.jpg", "width": 320, "height": 180
    },
    "high": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/hqdefault.jpg", "width": 480, "height": 360
    }
  },
  "channelTitle": "javascript fanatic",
  "liveBroadcastContent": "none",
  "publishTime": "2019-07-14T19:27:31Z"
  }
}

{
  etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38"
  items:
      etag: "mlweRndBtBgAcVC-11ZrL0oI7ok"
      id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"}
      kind: "youtube#searchResult"
      snippet: {publis
      kind: "youtube#searchListResponse"
      nextPageToken: "CBkQAA"
      pageInfo: {totalResults: 400229, resultsPerPage: 25}
      regionCode: "RS"
      }
}

VueMaterial help
Notes:

All other attributes, such as multiple and accept, can be used on md-field.
Icons used with https://fontawesome.com/v4.7.0/icons/
eslint or any other cheker full strict only for proc build in dev status lint will pass more roles.

Spiral position
Not in use at the moment.

  var count = 10;
  var radius = 32;
  for ( var i = 1, l = count; i <= l; i ++ ) {
    var phi = Math.acos( - 1 + ( 2 * i ) / l );
    var theta = Math.sqrt( l * Math.PI ) * phi;
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.setFromSphericalCoords( radius, phi, theta );
    mesh.lookAt( this.camera.position );
    this.scene.add( mesh );
  }

YT Download module

Download from: https://www.npmjs.com/package/youtube-dl

Help links/public
https://vuematerial.io/themes/configuration https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md#LoadinganAPIandMakingaRequest https://developers.google.com/youtube/v3/docs/search/list?apix=true

Direct link for dev server
VueTube web DEV [WIP] service 2020
https://maximumroulette.com:3000

Credits:

Used in my project:
project structural/methodology

https://vuejs.org/
JavaScript 3D library.

https://threejs.org/
Download videos from youtube in node.js using youtube-dl.

https://www.npmjs.com/package/youtube-dl

Download source code:

https://github.com/zlatnaspirala/vue-typescript-starter
Star project and thank you for visit my content.