Skip to content

Commit 815adbd

Browse files
Pablo Carmonastarpit
Pablo Carmona
authored and
starpit
committed
feat: add asciinema player
1 parent 1afd703 commit 815adbd

File tree

17 files changed

+905
-157
lines changed

17 files changed

+905
-157
lines changed

‎package-lock.json

+150-91
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13-13
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@
8686
"printWidth": 120
8787
},
8888
"devDependencies": {
89-
"@kui-shell/builder": "11.5.0-dev-20220725-153832",
90-
"@kui-shell/proxy": "11.5.0-dev-20220725-153832",
91-
"@kui-shell/react": "11.5.0-dev-20220725-153832",
92-
"@kui-shell/webpack": "11.5.0-dev-20220725-153832",
89+
"@kui-shell/builder": "11.5.0-dev-20220728-192258",
90+
"@kui-shell/proxy": "11.5.0-dev-20220728-192258",
91+
"@kui-shell/react": "11.5.0-dev-20220728-192258",
92+
"@kui-shell/webpack": "11.5.0-dev-20220728-192258",
9393
"@playwright/test": "^1.23.2",
9494
"@types/debug": "^4.1.7",
9595
"@types/node": "14.11.8",
@@ -113,16 +113,16 @@
113113
},
114114
"dependencies": {
115115
"@kui-shell/client": "file:./plugins/plugin-client-default",
116-
"@kui-shell/core": "11.5.0-dev-20220725-153832",
117-
"@kui-shell/plugin-bash-like": "11.5.0-dev-20220725-153832",
118-
"@kui-shell/plugin-client-common": "11.5.0-dev-20220725-153832",
116+
"@kui-shell/core": "11.5.0-dev-20220728-192258",
117+
"@kui-shell/plugin-bash-like": "11.5.0-dev-20220728-192258",
118+
"@kui-shell/plugin-client-common": "11.5.0-dev-20220728-192258",
119119
"@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
120-
"@kui-shell/plugin-core-support": "11.5.0-dev-20220725-153832",
121-
"@kui-shell/plugin-electron-components": "11.5.0-dev-20220725-153832",
122-
"@kui-shell/plugin-kubectl": "11.5.0-dev-20220725-153832",
120+
"@kui-shell/plugin-core-support": "11.5.0-dev-20220728-192258",
121+
"@kui-shell/plugin-electron-components": "11.5.0-dev-20220728-192258",
122+
"@kui-shell/plugin-kubectl": "11.5.0-dev-20220728-192258",
123123
"@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
124-
"@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220725-153832",
125-
"@kui-shell/plugin-proxy-support": "11.5.0-dev-20220725-153832",
126-
"@kui-shell/plugin-s3": "11.5.0-dev-20220725-153832"
124+
"@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220728-192258",
125+
"@kui-shell/plugin-proxy-support": "11.5.0-dev-20220728-192258",
126+
"@kui-shell/plugin-s3": "11.5.0-dev-20220728-192258"
127127
}
128128
}

‎plugins/plugin-client-default/casts/glue.cast

+552
Large diffs are not rendered by default.

‎plugins/plugin-client-default/config.d/style.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"bodyCss": "codeflare",
3-
"width": 800,
4-
"height": 600,
3+
"width": 1000,
4+
"height": 1000,
55
"frame": false,
66
"titleBarStyle": "hiddenInset",
77
"defaultTheme": "PatternFly4 Light"

‎plugins/plugin-client-default/icons/png/gettingStartedTemplate.png

515 Bytes
Loading

‎plugins/plugin-client-default/icons/png/[email protected]

712 Bytes
Loading

‎plugins/plugin-client-default/notebooks/hello.md

+9-13
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ layout:
77
2:
88
position: default
99
maximized: true
10-
inverseColors: true
11-
3:
12-
position: default
13-
maximized: true
1410
---
1511

1612
<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.
2521
2622
---
2723

28-
```shell
29-
---
30-
execute: now
31-
outputOnly: true
32-
---
33-
codeflare gallery
34-
```
35-
36-
---
24+
=== "See CodeFlare in Action"
25+
```shell
26+
---
27+
execute: now
28+
outputOnly: true
29+
maximize: true
30+
---
31+
codeflare gallery
32+
```
3733

3834
=== "Your Profiles"
3935

‎plugins/plugin-codeflare/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@logdna/tail-file": "^3.0.0",
2727
"@patternfly/react-charts": "^6.77.1",
2828
"@patternfly/react-core": "^4.224.1",
29+
"asciinema-player": "^3.0.1",
2930
"chokidar": "^3.5.3",
3031
"open": "^8.4.0",
3132
"pretty-bytes": "^6.0.0",

‎plugins/plugin-codeflare/src/@types/asciinema-player.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "asciinema-player"

‎plugins/plugin-codeflare/src/@types/images.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
declare module "*.cast" {
2+
const content: string
3+
export default content
4+
}
5+
16
declare module "*.svg" {
27
const content: string
38
export default content

‎plugins/plugin-codeflare/src/components/AsciinemaPlayer.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
* Copyright 2022 The Kubernetes Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React, { useEffect, useRef } from "react"
18+
import * as AsciinemaPlayerLibrary from "asciinema-player"
19+
20+
type AsciinemaPlayerProps = Partial<{
21+
src: string
22+
// START asciinemaOptions
23+
cols: number
24+
rows: number
25+
autoPlay: boolean
26+
preload: boolean
27+
loop: boolean | number
28+
startAt: number | string
29+
speed: number
30+
idleTimeLimit: number
31+
theme: string
32+
poster: string
33+
fit: string
34+
terminalFontSize: string
35+
terminalFontFamily: string
36+
// END asciinemaOptions
37+
}>
38+
39+
const AsciinemaPlayer: React.FC<AsciinemaPlayerProps> = ({ src, ...asciinemaOptions }) => {
40+
const ref = useRef<HTMLDivElement>(null)
41+
42+
useEffect(() => {
43+
const currentRef = ref.current
44+
AsciinemaPlayerLibrary.create(src, currentRef, asciinemaOptions)
45+
}, [src])
46+
47+
return <div ref={ref} className="flex-layout flex-align-center flex-fill" />
48+
}
49+
50+
export default AsciinemaPlayer

‎plugins/plugin-codeflare/src/components/CodeFlareGallery.tsx

+23-23
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,33 @@
1515
*/
1616

1717
import React from "react"
18-
import { Gallery, GalleryItem } from "@patternfly/react-core"
18+
import { Flex, FlexItem } from "@patternfly/react-core"
19+
20+
import AsciinemaPlayer from "./AsciinemaPlayer"
21+
22+
import "../../web/scss/components/Cast/_index.scss"
23+
24+
import glueCast from "@kui-shell/client/casts/glue.cast"
1925

2026
export default class CodeFlareGallery extends React.PureComponent {
27+
private readonly casts = [glueCast]
28+
2129
public render() {
2230
return (
23-
<Gallery hasGutter>
24-
<GalleryItem>
25-
<a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
26-
<img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
27-
</a>
28-
</GalleryItem>
29-
<GalleryItem>
30-
<a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
31-
<img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
32-
</a>
33-
</GalleryItem>
34-
<GalleryItem>
35-
<a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
36-
<img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
37-
</a>
38-
</GalleryItem>
39-
<GalleryItem>
40-
<a href="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ" target="_blank">
41-
<img src="https://asciinema.org/a/kYps2jg978lUwvyLfQXKrBsUZ.svg" />
42-
</a>
43-
</GalleryItem>
44-
</Gallery>
31+
<Flex className="flex-fill flex-layout flex-align-stretch codeflare--gallery kui--inverted-color-context">
32+
{this.casts.map((cast, idx) => (
33+
<FlexItem key={idx} className="flex-fill flex-layout">
34+
<AsciinemaPlayer
35+
src={cast}
36+
cols={120}
37+
rows={38}
38+
loop
39+
terminalFontFamily="var(--font-monospace)"
40+
autoPlay={true}
41+
/>
42+
</FlexItem>
43+
))}
44+
</Flex>
4545
)
4646
}
4747
}

‎plugins/plugin-codeflare/src/controller/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function registerCodeflareCommands(registrar: Registrar) {
6363
needsUI: true,
6464
outputOnly: true,
6565
width: 1000,
66-
height: 800,
66+
height: 1000,
6767
})
6868

6969
registrar.listen("/codeflare/gallery", () => import("./hello").then((_) => _.gallery()), {

‎plugins/plugin-codeflare/src/tray/icons.ts

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import bug from "@kui-shell/client/icons/png/bugTemplate.png"
2121
import powerOff from "@kui-shell/client/icons/png/powerOffTemplate.png"
2222
import play from "@kui-shell/client/icons/png/playTemplate.png"
2323
import grid from "@kui-shell/client/icons/png/gridTemplate.png"
24+
import gettingStarted from "@kui-shell/client/icons/png/gettingStartedTemplate.png"
2425

2526
import { join } from "path"
2627

@@ -37,3 +38,4 @@ export const powerOffIcon = iconFor(powerOff)
3738
export const bootIcon = iconFor(play)
3839
export const shutDownIcon = iconFor(powerOff)
3940
export const gridIcon = iconFor(grid)
41+
export const gettingStartedIcon = iconFor(gettingStarted)

‎plugins/plugin-codeflare/src/tray/menus/index.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { bugs, version } from "@kui-shell/client/package.json"
2121

2222
import profilesMenu from "./profiles"
2323
import UpdateFunction from "../update"
24-
import { bugIcon, powerOffIcon } from "../icons"
24+
import { bugIcon, powerOffIcon, gettingStartedIcon } from "../icons"
2525

2626
/** @return an Electron `Menu` model for our tray menu */
2727
export default async function buildContextMenu(
@@ -34,7 +34,11 @@ export default async function buildContextMenu(
3434
...(await profilesMenu(createWindow, updateFn)),
3535
{ type: "separator" },
3636
{ label: `Codeflare ${version}`, enabled: false },
37-
// { label: `About`, click: () => import("open").then((_) => _.default(homepage)) },
37+
{
38+
label: `Getting Started`,
39+
icon: gettingStartedIcon,
40+
click: () => createWindow([], { width: 1000, height: 1000 }),
41+
},
3842
{ label: `Report a Bug`, icon: bugIcon, click: () => import("open").then((_) => _.default(bugs.url)) },
3943
{ label: `Quit ${productName}`, icon: powerOffIcon, role: "quit" },
4044
])

‎plugins/plugin-codeflare/web/scss/components/Cast/_index.scss

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* Copyright 2022 The Kubernetes Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
@import "asciinema-player/dist/bundle/asciinema-player.css";
18+
19+
/** TODO move this to a Gallery.scss */
20+
.codeflare--gallery {
21+
overflow: auto;
22+
}
23+
24+
.asciinema-player {
25+
height: auto !important;
26+
}
27+
28+
.asciinema-theme-asciinema {
29+
background: var(--color-base00);
30+
31+
pre.asciinema-terminal {
32+
color: var(--color-text-01);
33+
background-color: var(--color-repl-background);
34+
border-color: var(--color-base01);
35+
font-size: 1vh !important;
36+
37+
margin-bottom: 0;
38+
}
39+
40+
.bg-9 {
41+
background-color: var(--color-base0E);
42+
}
43+
.fg-9 {
44+
color: var(--color-base0E);
45+
}
46+
.bg-1 {
47+
background-color: var(--color-base0E);
48+
}
49+
.fg-1 {
50+
color: var(--color-base0E);
51+
}
52+
.bg-6 {
53+
background-color: var(--color-base0C);
54+
}
55+
.fg-6 {
56+
color: var(--color-base0C);
57+
}
58+
.fg-2 {
59+
color: var(--color-base0B);
60+
}
61+
.bg-2 {
62+
background-color: var(--color-base0B);
63+
}
64+
.fg-14 {
65+
color: var(--color-base0B);
66+
}
67+
.bg-14 {
68+
background-color: var(--color-base0B);
69+
}
70+
.fg-3 {
71+
color: var(--color-base0A);
72+
}
73+
.bg-3 {
74+
background-color: var(--color-base0A);
75+
}
76+
}

‎plugins/plugin-codeflare/web/scss/components/Hello/_index.scss

+14-12
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
}
2828

2929
@include Split(3) {
30-
grid-template-rows: 1.5fr 1fr 1fr;
30+
grid-template-rows: 1fr 1.5fr 0.875fr;
3131
grid-template-columns: 1fr;
3232
grid-template-areas: "T1" "T2" "T3";
3333
}
@@ -110,17 +110,19 @@ $cell: 1.5em;
110110
}
111111
}
112112

113-
.pf-c-tile__header {
114-
overflow: hidden;
115-
white-space: nowrap;
116-
text-overflow: ellipsis;
117-
}
113+
.codeflare {
114+
.pf-c-tile__header {
115+
overflow: hidden;
116+
white-space: nowrap;
117+
text-overflow: ellipsis;
118+
}
118119

119-
.pf-c-tile__title {
120-
color: var(--color-tile-title);
121-
font-size: 1rem;
122-
}
120+
.pf-c-tile__title {
121+
color: var(--color-tile-title);
122+
font-size: 1rem;
123+
}
123124

124-
.pf-c-tile__body {
125-
color: var(--color-text-02);
125+
.pf-c-tile__body {
126+
color: var(--color-text-02);
127+
}
126128
}

0 commit comments

Comments
 (0)