Merge branch 'google_cloud_init' into 'develop'

Adding Google Cloud support to simple-editor (and other updates)

See merge request !14

README.md

@@ -56,6 +56,13 @@ npm run build
 This will generate a `dist` folder, which contains all the needed files to deploy this application. The dist directory 
 is meant to be served by an HTTP server, so it will not work if you open dist/index.html directly over file:// protocol.
 
+### Update npm depedencies
+```
+npm i -g npm-check-updates
+ncu -u
+npm install
+```
+
 ### Deploy application to Web Server
 If using Apache as your production web server, deploying the `dist` folder 
 to your web server requires an extra step. Some URLs used in this app

package.json

@@ -17,25 +17,26 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "axios": "^0.24.0",
+    "axios": "^1.4.0",
     "bootstrap": "^5.2.3",
-    "core-js": "^3.30.0",
-    "uuid": "^8.3.2",
+    "core-js": "^3.30.2",
+    "uuid": "^9.0.0",
     "vue": "^3.2.47",
     "vue-gtag": "^2.0.1",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-plugin-router": "^4.5.19",
-    "@vue/cli-plugin-vuex": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
+    "@types/node": "^20.1.1",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "^3.2.47",
     "babel-eslint": "^10.1.0",
+    "eslint-plugin-vue": "^9.11.1",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "path-browserify": "^1.0.1"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -17,7 +17,7 @@
             <li v-show="isAuthenticated" class="nav-item">
               <router-link to="/" class="nav-link" aria-current="page" exact>Projects</router-link>
             </li>
-            <li v-show="isAuthenticated" class="nav-item">
+            <li class="nav-item">
               <router-link to="/about" class="nav-link" aria-current="page">About</router-link>
             </li>
             <li v-show="isAuthenticated" class="nav-item px-3">

src/components/Projects.vue

@@ -12,7 +12,7 @@
 
   <!-- Project thumbnails -->
   <div class="row gy-2 gx-2 mb-2">
-    <div v-for="project in thumbnailedProjects" :key="project.id" class="col-sm-12 col-md-6 col-lg-3" style="position: relative;">
+    <div v-for="project in thumbnailedProjects" :key="project.id" class="col-sm-12 col-md-6 col-lg-3 project-card" style="position: relative;">
 
       <!-- Project name badge -->
       <span class="project-badge badge">{{ project.name }}</span>
@@ -223,11 +223,14 @@ export default {
     ...mapMutations(['setProject', 'clearErrors'])
   },
   computed: {
-    ...mapGetters(['thumbnailedProjects']),
+    ...mapGetters(['thumbnailedProjects', 'isAuthenticated']),
   },
   async mounted() {
+    console.log("Projects component mounted")
     this.show_spinner = true
-    await this.loadProjects()
+    if (this.isAuthenticated) {
+      await this.loadProjects()
+    }
     this.show_spinner = false
   }
 }
@@ -259,6 +262,8 @@ export default {
   .project-thumbnail {
     cursor: pointer;
     width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
   .profile-label {
     color: #ffffff;
@@ -272,6 +277,9 @@ export default {
     padding: 3px;
     opacity: 0.75;
   }
+  .project-card {
+    height: 184px;
+  }
   .project-badge {
     position: absolute;
     bottom: 5%;

src/store/axios.js

-import {create} from "axios";
+import axios from "axios";
 
 
 // Init a new axios instance, with auth
-const instance = create({
+const instance = axios.create({
     baseURL: process.env.VUE_APP_OPENSHOT_API_URL,
     headers: {'X-Requested-With': 'XMLHttpRequest'}
 });
 
 // Init a new axios instance, with auth
-const blob_instance = create({});
+const blob_instance = axios.create({});
 
 // Set the AUTH token for any request
 instance.interceptors.request.use(function (config) {

src/views/About.vue

@@ -36,6 +36,12 @@
         This is a demo application for OpenShot Cloud API. You can log-in, upload files,
         create/edit clips, move clips (up/down), export, and download a video.
       </p>
+      <p class="lead">
+        The source code is hosted on <a href="http://gitlab.openshot.org/public-projects/simple-editor">OpenShot
+        Studio's GitLab</a> server. It is licensed under the MIT license, and can be used in both
+        <strong>open-source</strong> and <strong>commercial</strong> projects. You can utilize this project
+        as a quick and affordable starting point, to accelerate your own custom software development.
+      </p>
     </div>
   </div>
 </template>

src/views/Home.vue

@@ -6,7 +6,7 @@
 <script>
 // @ is an alias to /src
 import Projects from "../components/Projects";
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'Home',
@@ -14,11 +14,15 @@ export default {
     Projects
   },
   computed: {
-    ...mapGetters(['isAuthenticated'])
+    ...mapGetters(['isAuthenticated']),
+  },
+  methods: {
+    ...mapMutations(['clearErrors'])
   },
   mounted() {
     if (!this.isAuthenticated) {
       // login failed, show login page
+      this.clearErrors()
       this.$router.push('/login')
     }
   }

src/views/Login.vue

@@ -7,9 +7,10 @@
         <strong>User:</strong> demo-cloud, <strong>Password:</strong> demo-password
         <p class="pt-3 fw-light">All demo projects are deleted every 12 hours, and are limited to 4 seconds in length.</p>
         <div>
-          <p class="m-0"><strong>Spin up</strong> your instance (with no limitations):</p>
-          <a class="btn btn-lg btn-primary launch-instance" href="https://aws.amazon.com/marketplace/pp/B074H87FSJ/" target="_blank" style="margin: 5px; background-color: #ffffff;" title="Launch Instance: AWS"><img src="//cdn.openshot.org/static/img/icons/aws.png"></a>
-          <a class="btn btn-lg btn-primary launch-instance" href="https://azuremarketplace.microsoft.com/en-us/marketplace/apps/openshotstudiosllc.openshot-cloud-api" target="_blank" style="margin: 5px; background-color: #ffffff;" title="Launch Instance: Azure"><img src="//cdn.openshot.org/static/img/icons/azure.png"></a>
+          <p class="m-0"><strong>Launch</strong> an instance (with no limitations):</p>
+          <a class="btn btn-lg btn-primary launch-instance" href="https://aws.amazon.com/marketplace/pp/B074H87FSJ/" target="_blank" style="margin: 5px; background-color: #ffffff;" title="Launch Instance: AWS"><img src="//cdn.openshot.org/static/img/icons/aws.svg" height="24"></a>
+          <a class="btn btn-lg btn-primary launch-instance" href="https://azuremarketplace.microsoft.com/en-us/marketplace/apps/openshotstudiosllc.openshot-cloud-api" target="_blank" style="margin: 5px; background-color: #ffffff;" title="Launch Instance: Azure"><img src="//cdn.openshot.org/static/img/icons/azure.svg" height="24"></a>
+          <a class="btn btn-lg btn-primary launch-instance" href="javascript:alert('Google Cloud - Coming Soon...')" style="margin: 5px; background-color: #ffffff;" title="Launch Instance: Google Cloud"><img src="//cdn.openshot.org/static/img/icons/google.svg" height="24"></a>
         </div>
       </div>
     </div>

src/views/Logout.vue

+<template>
+  <p/>
+</template>
+
 <script>
 import { mapMutations } from 'vuex'
 
@@ -9,7 +13,7 @@ export default {
   mounted() {
     // Logout user
     this.setUser(null)
-    this.setProjects(null)
+    this.setProjects([])
     localStorage.removeItem('auth')
     this.$router.push('/login')
   }

vue.config.js

@@ -4,5 +4,12 @@
  * @type {import('@vue/cli-service').ProjectOptions}
  */
 module.exports = {
-    publicPath: '/apps/simple-editor/' // Use relative path during build
+    publicPath: '/apps/simple-editor/', // Use relative path during build
+    configureWebpack: {
+        resolve: {
+            fallback: {
+                path: require.resolve('path-browserify')
+            }
+        }
+    }
 }
\ No newline at end of file