Make API links configurable in editor

.env.development

-VUE_APP_OPENSHOT_API_URL=http://127.0.0.1:8090
+VUE_APP_OPENSHOT_API_URL=http://127.0.0.1:9001
 VUE_APP_GA_ID=UA-4381101-7
+VUE_APP_SHOW_API_LINKS=true

.env.production

 VUE_APP_OPENSHOT_API_URL=https://cloud.openshot.org
 VUE_APP_GA_ID=UA-4381101-7
+VUE_APP_SHOW_API_LINKS=true

README.md

@@ -100,6 +100,7 @@ Configuration variables are stored in `.env` and `vue.config.js` files.
 
 - `VUE_APP_GA_ID`: Global site tag (gtag.js) for tracking on Google Analytics
 - `VUE_APP_OPENSHOT_API_URL`: URL of your own OpenShot Cloud API instance
+- `VUE_APP_SHOW_API_LINKS`: Set to `false` to hide the API navigation link and all contextual "View in API" actions (defaults to enabled)
 - `publicPath`: Relative path where this app will be served by your production web server
 
 See [Configuration Reference](https://cli.vuejs.org/config/).

src/App.vue

@@ -20,11 +20,8 @@
             <li class="nav-item">
               <router-link to="/about" class="nav-link" aria-current="page">About</router-link>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" :href="apiHref('/')" target="_blank" rel="noopener">API Explorer</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" :href="apiHref('/doc/')" target="_blank" rel="noopener">Documentation</a>
+            <li v-if="$showApiLinks" class="nav-item">
+              <a class="nav-link" href="/" target="_blank" rel="noopener">API</a>
             </li>
             <li v-show="isAuthenticated" class="nav-item px-3">
               <router-link to="/logout" class="nav-link" aria-current="page">Logout</router-link>
@@ -62,10 +59,6 @@ import DemoExpiryNotice from './components/DemoExpiryNotice.vue'
 export default {
   components: { DemoExpiryNotice },
   methods: {
-    apiHref(path) {
-      const base = (process.env.VUE_APP_OPENSHOT_API_URL || window.location.origin).replace(/\/+$/, '')
-      return `${base}${path}`
-    },
     removeError(error) {
       this.removeError(error)
     },

src/components/ClipEffectsModal.vue

@@ -14,7 +14,7 @@
             <p v-if="clipDisplayLabel" class="clip-meta mb-0 text-muted">
               {{ clipDisplayLabel }}
             </p>
-            <a v-if="clipContext.clipUrl"
+            <a v-if="$showApiLinks && clipContext.clipUrl"
                class="clip-api-link"
                :href="clipContext.clipUrl"
                target="_blank"

src/components/Clips.vue

@@ -61,8 +61,10 @@
                   <li v-if="index > 0"><a class="dropdown-item" href="#" @click="moveClipBtn('up', clip, index, index - 1)">Move Up</a></li>
                   <li v-if="index < clips.length - 1"><a class="dropdown-item" href="#" @click="moveClipBtn('down', clip, index, index + 1)">Move Down</a></li>
                   <li v-if="index > 0 || index < clips.length - 1"><hr class="dropdown-divider"></li>
+                  <template v-if="$showApiLinks">
                     <li><a class="dropdown-item" :href="clip.url" target="_blank" rel="noopener">View in API</a></li>
                     <li><hr class="dropdown-divider"></li>
+                  </template>
                   <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
                 </ul>
               </span>
@@ -136,7 +138,7 @@
             Cancel
           </button>
           <div class="d-flex align-items-center gap-2">
-            <a v-if="current_export.url"
+            <a v-if="$showApiLinks && current_export.url"
                class="btn btn-outline-primary"
                :href="current_export.url"
                target="_blank"

src/components/Files.vue

@@ -54,8 +54,10 @@
             <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
           </svg>
           <ul class="dropdown-menu small-dropdown">
+            <template v-if="$showApiLinks">
               <li><a class="dropdown-item" :href="file.url" target="_blank" rel="noopener">View in API</a></li>
               <li><hr class="dropdown-divider"></li>
+            </template>
             <li><a class="dropdown-item" href="#" @click="deleteFileBtn(file)">Delete</a></li>
           </ul>
         </div>

src/components/Projects.vue

@@ -24,8 +24,10 @@
         </svg>
         <ul class="dropdown-menu small-dropdown">
           <li><a class="dropdown-item" href="#" @click="launchEditor(project)">Launch Editor</a></li>
+          <template v-if="$showApiLinks">
             <li><a class="dropdown-item" :href="project.url" target="_blank" rel="noopener">View in API</a></li>
             <li><hr class="dropdown-divider"></li>
+          </template>
           <li><a class="dropdown-item" href="#" @click="editProjectClick(project)">Edit</a></li>
           <li><a class="dropdown-item" href="#" @click="showDeletePrompt(project)">Delete</a></li>
         </ul>

src/main.js

@@ -9,6 +9,10 @@ import { initAdsConversions, isDemoEnvironment } from "./utils/adsConversions"
 
 const app = createApp(App)
 
+// Keep the educational links enabled by default. Deployments that only want
+// the editing experience can hide every API link at build time.
+app.config.globalProperties.$showApiLinks = process.env.VUE_APP_SHOW_API_LINKS !== 'false'
+
 const tagId = process.env.VUE_APP_GA_ID
 if (tagId) {
   app.use(createGtag({

src/views/Editor.vue

 <template>
-  <div v-if="hasData" class="api-context-bar">
-    <div><span>Editing project</span><strong>{{ project.name }}</strong></div>
-    <a :href="project.url" target="_blank" rel="noopener">View Project in API</a>
-  </div>
-
   <!-- Video Editor container -->
  <div class="row">
 
@@ -85,12 +80,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.api-context-bar { margin-bottom: 16px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #dbe3ef; border-radius: 9px; background: #f8fafc; color: #64748b; font-size: 13px; }
-.api-context-bar span { margin-right: 7px; }
-.api-context-bar strong { color: #273449; }
-.api-context-bar a { color: #2563eb; font-weight: 600; text-decoration: none; white-space: nowrap; }
-.api-context-bar a:hover { text-decoration: underline; }
-@media (max-width: 575px) { .api-context-bar { align-items: flex-start; flex-direction: column; gap: 5px; } }
-</style>