feat: add asciinema player

Pablo Carmona · starpit · commit 815adbd399ce · 2022-07-28T19:50:15.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,10 +86,10 @@
     "printWidth": 120
   },
   "devDependencies": {
-    "@kui-shell/builder": "11.5.0-dev-20220725-153832",
-    "@kui-shell/proxy": "11.5.0-dev-20220725-153832",
-    "@kui-shell/react": "11.5.0-dev-20220725-153832",
-    "@kui-shell/webpack": "11.5.0-dev-20220725-153832",
+    "@kui-shell/builder": "11.5.0-dev-20220728-192258",
+    "@kui-shell/proxy": "11.5.0-dev-20220728-192258",
+    "@kui-shell/react": "11.5.0-dev-20220728-192258",
+    "@kui-shell/webpack": "11.5.0-dev-20220728-192258",
     "@playwright/test": "^1.23.2",
     "@types/debug": "^4.1.7",
     "@types/node": "14.11.8",
@@ -113,16 +113,16 @@
   },
   "dependencies": {
     "@kui-shell/client": "file:./plugins/plugin-client-default",
-    "@kui-shell/core": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-client-common": "11.5.0-dev-20220725-153832",
+    "@kui-shell/core": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-client-common": "11.5.0-dev-20220728-192258",
     "@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
-    "@kui-shell/plugin-core-support": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220725-153832",
+    "@kui-shell/plugin-core-support": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220728-192258",
     "@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
-    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220725-153832",
-    "@kui-shell/plugin-s3": "11.5.0-dev-20220725-153832"
+    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220728-192258",
+    "@kui-shell/plugin-s3": "11.5.0-dev-20220728-192258"
   }
 }
diff --git a/plugins/plugin-client-default/casts/glue.cast b/plugins/plugin-client-default/casts/glue.cast
diff --git a/plugins/plugin-client-default/config.d/style.json b/plugins/plugin-client-default/config.d/style.json
@@ -1,7 +1,7 @@
 {
   "bodyCss": "codeflare",
-  "width": 800,
-  "height": 600,
+  "width": 1000,
+  "height": 1000,
   "frame": false,
   "titleBarStyle": "hiddenInset",
   "defaultTheme": "PatternFly4 Light"
diff --git a/plugins/plugin-client-default/icons/png/gettingStartedTemplate.png b/plugins/plugin-client-default/icons/png/gettingStartedTemplate.png
diff --git a/plugins/plugin-client-default/icons/png/gettingStartedTemplate@2x.png b/plugins/plugin-client-default/icons/png/gettingStartedTemplate@2x.png
diff --git a/plugins/plugin-client-default/notebooks/hello.md b/plugins/plugin-client-default/notebooks/hello.md
@@ -7,10 +7,6 @@ layout:
     2:
         position: default
         maximized: true
-        inverseColors: true
-    3:
-        position: default
-        maximized: true
 ---
 
 <img alt="CodeFlare Icon" src="@kui-shell/client/icons/svg/codeflare.svg" width="225" height="225" align="left" />
@@ -25,15 +21,15 @@ and machine learning pipelines on the cloud.
 
 ---
 
-```shell
----
-execute: now
-outputOnly: true
----
-codeflare gallery
-```
-
----
+=== "See CodeFlare in Action"
+    ```shell
+    ---
+    execute: now
+    outputOnly: true
+    maximize: true
+    ---
+    codeflare gallery
+    ```
 
 === "Your Profiles"
 
diff --git a/plugins/plugin-codeflare/package.json b/plugins/plugin-codeflare/package.json
@@ -26,6 +26,7 @@
     "@logdna/tail-file": "^3.0.0",
     "@patternfly/react-charts": "^6.77.1",
     "@patternfly/react-core": "^4.224.1",
+    "asciinema-player": "^3.0.1",
     "chokidar": "^3.5.3",
     "open": "^8.4.0",
     "pretty-bytes": "^6.0.0",
diff --git a/plugins/plugin-codeflare/src/@types/asciinema-player.d.ts b/plugins/plugin-codeflare/src/@types/asciinema-player.d.ts
@@ -0,0 +1 @@
+declare module "asciinema-player"
diff --git a/plugins/plugin-codeflare/src/@types/images.d.ts b/plugins/plugin-codeflare/src/@types/images.d.ts
@@ -1,3 +1,8 @@
+declare module "*.cast" {
+  const content: string
+  export default content
+}
+
 declare module "*.svg" {
   const content: string
   export default content
diff --git a/plugins/plugin-codeflare/src/components/AsciinemaPlayer.tsx b/plugins/plugin-codeflare/src/components/AsciinemaPlayer.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef } from "react"
+import * as AsciinemaPlayerLibrary from "asciinema-player"
+
+type AsciinemaPlayerProps = Partial<{
+  src: string
+  // START asciinemaOptions
+  cols: number
+  rows: number
+  autoPlay: boolean
+  preload: boolean
+  loop: boolean | number
+  startAt: number | string
+  speed: number
+  idleTimeLimit: number
+  theme: string
+  poster: string
+  fit: string
+  terminalFontSize: string
+  terminalFontFamily: string
+  // END asciinemaOptions
+}>
+
+const AsciinemaPlayer: React.FC<AsciinemaPlayerProps> = ({ src, ...asciinemaOptions }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const currentRef = ref.current
+    AsciinemaPlayerLibrary.create(src, currentRef, asciinemaOptions)
+  }, [src])
+
+  return <div ref={ref} className="flex-layout flex-align-center flex-fill" />
+}
+
+export default AsciinemaPlayer
diff --git a/plugins/plugin-codeflare/src/components/CodeFlareGallery.tsx b/plugins/plugin-codeflare/src/components/CodeFlareGallery.tsx
@@ -15,33 +15,33 @@
  */
 
 import React from "react"
-import { Gallery, GalleryItem } from "@patternfly/react-core"
+import { Flex, FlexItem } from "@patternfly/react-core"
+
+import AsciinemaPlayer from "./AsciinemaPlayer"
+
+import "../../web/scss/components/Cast/_index.scss"
+
+import glueCast from "@kui-shell/client/casts/glue.cast"
 
 export default class CodeFlareGallery extends React.PureComponent {
+  private readonly casts = [glueCast]
+
   public render() {
     return (
-      <Gallery hasGutter>
-        <GalleryItem>
-          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
-            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
-          </a>
-        </GalleryItem>
-        <GalleryItem>
-          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
-            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
-          </a>
-        </GalleryItem>
-        <GalleryItem>
-          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
-            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
-          </a>
-        </GalleryItem>
-        <GalleryItem>
-          <a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
-            <img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
-          </a>
-        </GalleryItem>
-      </Gallery>
+      <Flex className="flex-fill flex-layout flex-align-stretch codeflare--gallery kui--inverted-color-context">
+        {this.casts.map((cast, idx) => (
+          <FlexItem key={idx} className="flex-fill flex-layout">
+            <AsciinemaPlayer
+              src={cast}
+              cols={120}
+              rows={38}
+              loop
+              terminalFontFamily="var(--font-monospace)"
+              autoPlay={true}
+            />
+          </FlexItem>
+        ))}
+      </Flex>
     )
   }
 }
diff --git a/plugins/plugin-codeflare/src/controller/index.ts b/plugins/plugin-codeflare/src/controller/index.ts
@@ -63,7 +63,7 @@ export default function registerCodeflareCommands(registrar: Registrar) {
     needsUI: true,
     outputOnly: true,
     width: 1000,
-    height: 800,
+    height: 1000,
   })
 
   registrar.listen("/codeflare/gallery", () => import("./hello").then((_) => _.gallery()), {
diff --git a/plugins/plugin-codeflare/src/tray/icons.ts b/plugins/plugin-codeflare/src/tray/icons.ts
@@ -21,6 +21,7 @@ import bug from "@kui-shell/client/icons/png/bugTemplate.png"
 import powerOff from "@kui-shell/client/icons/png/powerOffTemplate.png"
 import play from "@kui-shell/client/icons/png/playTemplate.png"
 import grid from "@kui-shell/client/icons/png/gridTemplate.png"
+import gettingStarted from "@kui-shell/client/icons/png/gettingStartedTemplate.png"
 
 import { join } from "path"
 
@@ -37,3 +38,4 @@ export const powerOffIcon = iconFor(powerOff)
 export const bootIcon = iconFor(play)
 export const shutDownIcon = iconFor(powerOff)
 export const gridIcon = iconFor(grid)
+export const gettingStartedIcon = iconFor(gettingStarted)
diff --git a/plugins/plugin-codeflare/src/tray/menus/index.ts b/plugins/plugin-codeflare/src/tray/menus/index.ts
@@ -21,7 +21,7 @@ import { bugs, version } from "@kui-shell/client/package.json"
 
 import profilesMenu from "./profiles"
 import UpdateFunction from "../update"
-import { bugIcon, powerOffIcon } from "../icons"
+import { bugIcon, powerOffIcon, gettingStartedIcon } from "../icons"
 
 /** @return an Electron `Menu` model for our tray menu */
 export default async function buildContextMenu(
@@ -34,7 +34,11 @@ export default async function buildContextMenu(
     ...(await profilesMenu(createWindow, updateFn)),
     { type: "separator" },
     { label: `Codeflare ${version}`, enabled: false },
-    // { label: `About`, click: () => import("open").then((_) => _.default(homepage)) },
+    {
+      label: `Getting Started`,
+      icon: gettingStartedIcon,
+      click: () => createWindow([], { width: 1000, height: 1000 }),
+    },
     { label: `Report a Bug`, icon: bugIcon, click: () => import("open").then((_) => _.default(bugs.url)) },
     { label: `Quit ${productName}`, icon: powerOffIcon, role: "quit" },
   ])
diff --git a/plugins/plugin-codeflare/web/scss/components/Cast/_index.scss b/plugins/plugin-codeflare/web/scss/components/Cast/_index.scss
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "asciinema-player/dist/bundle/asciinema-player.css";
+
+/** TODO move this to a Gallery.scss */
+.codeflare--gallery {
+  overflow: auto;
+}
+
+.asciinema-player {
+  height: auto !important;
+}
+
+.asciinema-theme-asciinema {
+  background: var(--color-base00);
+
+  pre.asciinema-terminal {
+    color: var(--color-text-01);
+    background-color: var(--color-repl-background);
+    border-color: var(--color-base01);
+    font-size: 1vh !important;
+
+    margin-bottom: 0;
+  }
+
+  .bg-9 {
+    background-color: var(--color-base0E);
+  }
+  .fg-9 {
+    color: var(--color-base0E);
+  }
+  .bg-1 {
+    background-color: var(--color-base0E);
+  }
+  .fg-1 {
+    color: var(--color-base0E);
+  }
+  .bg-6 {
+    background-color: var(--color-base0C);
+  }
+  .fg-6 {
+    color: var(--color-base0C);
+  }
+  .fg-2 {
+    color: var(--color-base0B);
+  }
+  .bg-2 {
+    background-color: var(--color-base0B);
+  }
+  .fg-14 {
+    color: var(--color-base0B);
+  }
+  .bg-14 {
+    background-color: var(--color-base0B);
+  }
+  .fg-3 {
+    color: var(--color-base0A);
+  }
+  .bg-3 {
+    background-color: var(--color-base0A);
+  }
+}
diff --git a/plugins/plugin-codeflare/web/scss/components/Hello/_index.scss b/plugins/plugin-codeflare/web/scss/components/Hello/_index.scss
@@ -27,7 +27,7 @@
     }
 
     @include Split(3) {
-      grid-template-rows: 1.5fr 1fr 1fr;
+      grid-template-rows: 1fr 1.5fr 0.875fr;
       grid-template-columns: 1fr;
       grid-template-areas: "T1" "T2" "T3";
     }
@@ -110,17 +110,19 @@ $cell: 1.5em;
   }
 }
 
-.pf-c-tile__header {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+.codeflare {
+  .pf-c-tile__header {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-.pf-c-tile__title {
-  color: var(--color-tile-title);
-  font-size: 1rem;
-}
+  .pf-c-tile__title {
+    color: var(--color-tile-title);
+    font-size: 1rem;
+  }
 
-.pf-c-tile__body {
-  color: var(--color-text-02);
+  .pf-c-tile__body {
+    color: var(--color-text-02);
+  }
 }
