Merge pull request #552 from Gencaster/537-link-to-listening-from-the…

…-editor

added menu buttons for play menu

caster-back/operations.gql

@@ -115,6 +115,7 @@ mutation deleteScriptCell($scriptCellUuid:UUID!) {
 subscription graph($uuid: UUID!) {
   graph(graphUuid: $uuid) {
     name
+    slugName
     uuid
     edges {
       uuid

caster-editor/Dockerfile.deploy

@@ -15,6 +15,10 @@ ARG SENTRY_DSN_CASTER_EDITOR
 ENV VITE_BACKEND_URL=${BACKEND_URL}
 ENV VITE_SENTRY_DSN_CASTER_EDITOR=${SENTRY_DSN_CASTER_EDITOR}
 
+ENV VITE_GENCASTER_FRONT_URL=${GENCASTER_FRONT_URL}
+ENV VITE_GENCASTER_EDITOR_URL=${GENCASTER_EDITOR_URL}
+ENV VITE_GENCASTER_BACKEND_URL=${GENCASTER_BACKEND_URL}
+
 ADD . .
 
 RUN npm run build

caster-editor/src/assets/scss/_elementplus.scss

@@ -45,14 +45,22 @@
       margin: 0;
       color: #{$black};
       background-color: transparent;
+
       border: none;
       border-left: none !important;
+      box-shadow: none !important;
 
       &:hover {
         color: #{$black};
         background-color: $grey;
       }
     }
+
+    &.is-active {
+      .el-radio-button__inner {
+        background-color: $grey;
+      }
+    }
   }
 }
 

caster-editor/src/components/Menu.vue

@@ -30,7 +30,12 @@
         >
           <MenuTabEdit :graph="graph" />
         </div>
-        <div v-if="tab === Tab.Play" />
+        <div
+          v-if="tab === Tab.Play"
+          class="left"
+        >
+          <MenuTabPlay :graph="graph" />
+        </div>
       </div>
     </div>
     <div class="menu-spacer" />
@@ -50,9 +55,10 @@ import { ref, type Ref } from "vue";
 import { Tab, useInterfaceStore } from "@/stores/InterfaceStore";
 import MenuTab from "./MenuTabHeader.vue";
 import MenuTabEdit from "./MenuTabEdit.vue";
+import MenuTabPlay from "./MenuTabPlay.vue";
 import DialogExitGraph from "./DialogExitGraph.vue";
 
-export type GraphMenu = Pick<Graph, "name" | "uuid">;
+export type GraphMenu = Pick<Graph, "name" | "uuid" | "slugName">;
 
 // Props
 defineProps<{

caster-editor/src/components/MenuTabPlay.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <button
+      class="unstyled"
+      @click="directLink()"
+    >
+      Public
+    </button>
+    <button
+      class="unstyled"
+      @click="debug()"
+    >
+      Debug
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Graph } from "@/graphql";
+import { ElMessage } from "element-plus";
+
+const props = defineProps<{
+  graph: Pick<Graph, "uuid" | "slugName">;
+}>();
+
+const gencasterFrontUrl = (): string | undefined => {
+  // see https://github.com/Gencaster/gencaster/pull/552/files#r1315599653
+  let url: string | undefined = undefined;
+  if (window.location.hostname === "127.0.0.1") {
+    url = "http://127.0.0.1:3000";
+  } else if (import.meta.env.GENCASTER_FRONT_URL) {
+    url = import.meta.env.GENCASTER_FRONT_URL;
+  }
+  return url;
+};
+
+const directLink = () => {
+  const frontUrl = gencasterFrontUrl();
+  if (frontUrl) {
+    window.open(`${frontUrl}/listen/${props.graph.slugName}`, "_blank");
+  } else {
+    ElMessage.error(`Could not find the URL for the Gencaster frontend`);
+  }
+};
+
+const debug = () => {
+  const frontUrl = gencasterFrontUrl();
+  if (frontUrl) {
+    window.open(`${frontUrl}/debug`, "_blank");
+  } else {
+    ElMessage.error(`Could not find the URL for the Gencaster frontend`);
+  }
+};
+</script>

caster-editor/src/graphql.ts

@@ -952,6 +952,7 @@ export type GraphSubscriptionVariables = Exact<{
 export type GraphSubscription = {
   graph: {
     name: string;
+    slugName: string;
     uuid: any;
     edges: Array<{ uuid: any; outNode: { uuid: any }; inNode: { uuid: any } }>;
     nodes: Array<{
@@ -1508,6 +1509,7 @@ export const GraphDocument = gql`
   subscription graph($uuid: UUID!) {
     graph(graphUuid: $uuid) {
       name
+      slugName
       uuid
       edges {
         uuid

caster-front/Dockerfile.deploy

@@ -17,6 +17,10 @@ ENV VITE_BACKEND_URL=${BACKEND_URL}
 ENV VITE_JANUS_URL=${JANUS_URL}
 ENV VITE_SENTRY_DSN_CASTER_FRONT=${SENTRY_DSN_CASTER_FRONT}
 
+ENV VITE_GENCASTER_FRONT_URL=${GENCASTER_FRONT_URL}
+ENV VITE_GENCASTER_EDITOR_URL=${GENCASTER_EDITOR_URL}
+ENV VITE_GENCASTER_BACKEND_URL=${GENCASTER_BACKEND_URL}
+
 RUN npm run build
 
 FROM nginx:1.23-alpine

caster-front/src/graphql.ts

@@ -952,6 +952,7 @@ export type GraphSubscriptionVariables = Exact<{
 export type GraphSubscription = {
   graph: {
     name: string;
+    slugName: string;
     uuid: any;
     edges: Array<{ uuid: any; outNode: { uuid: any }; inNode: { uuid: any } }>;
     nodes: Array<{
@@ -1508,6 +1509,7 @@ export const GraphDocument = gql`
   subscription graph($uuid: UUID!) {
     graph(graphUuid: $uuid) {
       name
+      slugName
       uuid
       edges {
         uuid

vars.deploy.dev.env

@@ -11,3 +11,7 @@ JANUS_PUBLIC_IP=195.201.163.94
 
 SUPERCOLLIDER_USE_INPUT=1
 SUPERCOLLIDER_NUM_STREAMS=15
+
+GENCASTER_FRONT_URL=https://dev.gencaster.org
+GENCASTER_EDITOR_URL=https://editor.dev.gencaster.org
+GENCASTER_BACKEND_URL=https://backend.dev.gencaster.org

vars.env

@@ -21,3 +21,7 @@ SUPERCOLLIDER_NUM_STREAMS=2
 
 JANUS_PUBLIC_IP=127.0.0.1
 BACKEND_URL=http://127.0.0.1:8081
+
+GENCASTER_FRONT_URL=http://127.0.0.1:3000
+GENCASTER_EDITOR_URL=http://127.0.0.1:3001
+GENCASTER_BACKEND_URL=http://127.0.0.1:8081