Connect editor resources to API explorer

src/App.vue

@@ -20,6 +20,12 @@
             <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>
             <li v-show="isAuthenticated" class="nav-item px-3">
               <router-link to="/logout" class="nav-link" aria-current="page">Logout</router-link>
             </li>
@@ -56,6 +62,10 @@ 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,6 +14,13 @@
             <p v-if="clipDisplayLabel" class="clip-meta mb-0 text-muted">
               {{ clipDisplayLabel }}
             </p>
+            <a v-if="clipContext.clipUrl"
+               class="clip-api-link"
+               :href="clipContext.clipUrl"
+               target="_blank"
+               rel="noopener">
+              View this clip in API
+            </a>
           </div>
           <button
             type="button"
@@ -506,6 +513,15 @@ export default {
 .clip-effects-modal .clip-meta {
   font-size: 0.85rem;
 }
+.clip-effects-modal .clip-api-link {
+  display: inline-block;
+  margin-top: 3px;
+  color: #2563eb;
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+.clip-effects-modal .clip-api-link:hover { text-decoration: underline; }
 .clip-effects-modal .audio-controls {
   display: flex;
   align-items: center;

src/components/Clips.vue

@@ -61,6 +61,8 @@
                   <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>
+                  <li><a class="dropdown-item" :href="clip.url" target="_blank" rel="noopener">View in API</a></li>
+                  <li><hr class="dropdown-divider"></li>
                   <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
                 </ul>
               </span>
@@ -134,6 +136,13 @@
             Cancel
           </button>
           <div class="d-flex align-items-center gap-2">
+            <a v-if="current_export.url"
+               class="btn btn-outline-primary"
+               :href="current_export.url"
+               target="_blank"
+               rel="noopener">
+              View Export in API
+            </a>
             <div v-if="current_export.output" class="btn-group">
               <button type="button"
                       class="btn btn-success dropdown-toggle"

src/components/Files.vue

@@ -54,6 +54,8 @@
             <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">
+            <li><a class="dropdown-item" :href="file.url" target="_blank" rel="noopener">View in API</a></li>
+            <li><hr class="dropdown-divider"></li>
             <li><a class="dropdown-item" href="#" @click="deleteFileBtn(file)">Delete</a></li>
           </ul>
         </div>

src/components/Projects.vue

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

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">
 
@@ -82,5 +87,10 @@ 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>