@pathmx/player 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -132
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,80 +1,38 @@
|
|
|
1
1
|
# `@pathmx/player`
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
presentation. It derives its route from semantic HTML in the browser, so Sources
|
|
5
|
-
stay ordinary Markdown. Core image directives compile into portable metadata,
|
|
6
|
-
which Player projects into presentation frames before deriving that route.
|
|
3
|
+
Focused reading and slide presentation experiences for PathMX documents.
|
|
7
4
|
|
|
8
|
-
Install
|
|
5
|
+
## Install
|
|
9
6
|
|
|
10
|
-
```
|
|
11
|
-
|
|
7
|
+
```sh
|
|
8
|
+
bun run pmx plugins add player
|
|
12
9
|
```
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
Use `?play=focus` for reading or `?play=presentation` for slides. The current
|
|
20
|
-
settings model also supports `intensity=low|medium|high`,
|
|
21
|
-
`play-theme=native|editorial|signal|code`, `play-guide=off`, and
|
|
22
|
-
`play-notes=off`. The last-used controls are remembered locally; an active
|
|
23
|
-
Play URL records the resolved shareable state.
|
|
24
|
-
|
|
25
|
-
High intensity hides upcoming Beats completely while keeping previously viewed
|
|
26
|
-
Beats visible at a reduced opacity.
|
|
27
|
-
A Play URL opens at its public Beat fragment or the first Beat. Beats with
|
|
28
|
-
public fragments keep the URL current for copying, history traversal, and
|
|
29
|
-
reloads at the same point. Fragment-free URLs always start from the beginning;
|
|
30
|
-
private session state never changes where a shared URL opens.
|
|
31
|
-
|
|
32
|
-
In presentation mode Player owns browser scroll restoration. It re-anchors the
|
|
33
|
-
active Beat after initial load and persisted-page restoration so the viewport
|
|
34
|
-
cannot drift away from the progress state when an iOS browser view restores an
|
|
35
|
-
older document offset.
|
|
36
|
-
|
|
37
|
-
The maintained acceptance fixtures are:
|
|
38
|
-
|
|
39
|
-
- `/demos/block-layouts.demo`
|
|
40
|
-
- `/demos/play-reading-gauntlet.demo?play=focus`
|
|
41
|
-
- `/demos/play-deck-gauntlet.demo?play=presentation`
|
|
42
|
-
- `/demos/play-media-hints.demo?play=presentation`
|
|
43
|
-
- `/demos/play-theme-gallery.demo`
|
|
44
|
-
|
|
45
|
-
Keyboard controls:
|
|
46
|
-
|
|
47
|
-
| Shortcut | Result |
|
|
48
|
-
| ------------------------- | ------------------------------- |
|
|
49
|
-
| `Command/Control + Enter` | Start Play with saved settings |
|
|
50
|
-
| `↑` / `↓`, `Space` | Previous / next Beat |
|
|
51
|
-
| `←` / `→` | Previous / next Block |
|
|
52
|
-
| `G` | Toggle the Block grid |
|
|
53
|
-
| `M` | Change between Focus and Slides |
|
|
54
|
-
| `+` / `-` | Raise / lower intensity |
|
|
55
|
-
| `Escape` | Close the grid, then exit Play |
|
|
11
|
+
```ts
|
|
12
|
+
// plugins/player.plugin.ts
|
|
13
|
+
export { default } from "@pathmx/player"
|
|
14
|
+
```
|
|
56
15
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
Block updates the current shareable Beat without adding browser-history noise.
|
|
16
|
+
Most applications should install [`@pathmx/paths`](https://www.npmjs.com/package/@pathmx/paths)
|
|
17
|
+
instead. It includes Player with Path and Completion.
|
|
60
18
|
|
|
61
|
-
##
|
|
19
|
+
## Use Player
|
|
62
20
|
|
|
63
|
-
|
|
21
|
+
Place the Player app in any Markdown Source that should offer Play mode:
|
|
64
22
|
|
|
65
23
|
```md
|
|
66
|
-
|
|
24
|
+
# Course introduction
|
|
67
25
|
|
|
68
|
-
|
|
26
|
+
<x-player-app />
|
|
27
|
+
|
|
28
|
+
Welcome to the course.
|
|
69
29
|
```
|
|
70
30
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
link that should enter directly into Play, for example
|
|
75
|
-
`?play=presentation#course-goals`.
|
|
31
|
+
Open the Source with `?play=focus` for focused reading or
|
|
32
|
+
`?play=presentation` for slides. Player also remembers choices made through
|
|
33
|
+
its on-page controls.
|
|
76
34
|
|
|
77
|
-
Choose a
|
|
35
|
+
Choose a default theme in Source frontmatter:
|
|
78
36
|
|
|
79
37
|
```md
|
|
80
38
|
---
|
|
@@ -83,79 +41,17 @@ play:
|
|
|
83
41
|
---
|
|
84
42
|
```
|
|
85
43
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<!--
|
|
90
|
-
layout: media-end
|
|
91
|
-
-->
|
|
92
|
-
|
|
93
|
-
# A slide title
|
|
44
|
+
Available themes are `native`, `editorial`, `signal`, and `code`. Block
|
|
45
|
+
topmatter can set `play.variant` to `cover`, `section`, `quote`, `fact`,
|
|
46
|
+
`full`, or `end`.
|
|
94
47
|
|
|
95
|
-
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
The core Block layouts are `center`, `media-start`, and `media-end`; they also
|
|
99
|
-
apply outside Player. Player-only rhetorical treatments stay under
|
|
100
|
-
`play.variant`:
|
|
48
|
+
Give an important Beat a stable link target with `data-pmx-beat`:
|
|
101
49
|
|
|
102
50
|
```md
|
|
103
|
-
|
|
104
|
-
play:
|
|
105
|
-
variant: quote
|
|
106
|
-
-->
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
The Player variants are `cover`, `section`, `quote`, `fact`, `full`, and
|
|
110
|
-
`end`. Tables step through body rows automatically. Code fences opt into
|
|
111
|
-
line-group Beats with a compact range expression:
|
|
112
|
-
|
|
113
|
-
````md
|
|
114
|
-
```ts [1-2|3|5-7]
|
|
115
|
-
// code
|
|
116
|
-
```
|
|
117
|
-
````
|
|
118
|
-
|
|
119
|
-
Standalone Markdown images keep their natural size by default. Put one native
|
|
120
|
-
image directive at the start of the alt text when a Block needs a different
|
|
121
|
-
media treatment:
|
|
122
|
-
|
|
123
|
-
```md
|
|
124
|
-

|
|
125
|
-

|
|
126
|
-

|
|
127
|
-

|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
`fit` contains the whole image; `fill` covers the available content area and
|
|
131
|
-
becomes full-bleed in Slides mode when it is the Block's only content.
|
|
132
|
-
`background` covers the Block behind its content, while `background.fit` shows
|
|
133
|
-
the entire background. The core Image Plugin removes the leading directive
|
|
134
|
-
from the rendered `alt` attribute, so the remaining text stays meaningful to
|
|
135
|
-
readers and assistive technology.
|
|
136
|
-
|
|
137
|
-
Add presenter annotations with the Deckset-style caret paragraph syntax. Each
|
|
138
|
-
additional note paragraph starts with another caret:
|
|
139
|
-
|
|
140
|
-
```md
|
|
141
|
-
# Explain the model
|
|
142
|
-
|
|
143
|
-
^ Ask for a concrete example before advancing.
|
|
144
|
-
|
|
145
|
-
^ Relate the answer to the next Block.
|
|
51
|
+
<p data-pmx-beat="course-goals">Name the three course goals.</p>
|
|
146
52
|
```
|
|
147
53
|
|
|
148
|
-
|
|
149
|
-
the active Block's notes in an optional bottom-right annotation card.
|
|
54
|
+
Then link directly to `?play=presentation#course-goals`.
|
|
150
55
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
React-owned Plugin surfaces can import the source-owned shadcn/Base UI layer
|
|
154
|
-
from `@pathmx/react/ui`. `ActionButton` is the standard accessible icon-action
|
|
155
|
-
boundary; Player composition remains private to this Plugin.
|
|
156
|
-
|
|
157
|
-
```tsx
|
|
158
|
-
import { ActionButton } from "@pathmx/react/ui"
|
|
159
|
-
|
|
160
|
-
;<ActionButton label="Open tools" icon={<ToolsIcon aria-hidden="true" />} />
|
|
161
|
-
```
|
|
56
|
+
Keyboard controls use the arrow keys to move, `Space` for the next Beat, `G`
|
|
57
|
+
for the Block grid, `M` to switch mode, and `Escape` to close or exit Player.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pathmx/player",
|
|
3
3
|
"description": "Focused reading and presentation experiences for PathMX.",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.1",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": ">=19.0.0"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@pathmx/react": "0.5.
|
|
29
|
+
"@pathmx/react": "0.5.1",
|
|
30
30
|
"lucide-react": "^1.34.0"
|
|
31
31
|
}
|
|
32
32
|
}
|