@banou/media-player 0.6.0 → 0.6.2

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.
Files changed (37) hide show
  1. package/README.md +6 -6
  2. package/package.json +51 -51
  3. package/src/assets/picture-in-picture.svg +5 -5
  4. package/src/components/chrome.tsx +95 -95
  5. package/src/components/control-bar.tsx +333 -333
  6. package/src/components/overlay.tsx +91 -91
  7. package/src/components/playback-slider.tsx +174 -174
  8. package/src/components/progress-bar.tsx +251 -251
  9. package/src/components/settings.tsx +321 -321
  10. package/src/components/sound.tsx +100 -100
  11. package/src/components/tooltip-display.tsx +83 -83
  12. package/src/components/volume-slider.tsx +156 -156
  13. package/src/index.tsx +195 -195
  14. package/src/main.tsx +169 -169
  15. package/src/state-machines/data-source.ts +84 -84
  16. package/src/state-machines/index.ts +5 -5
  17. package/src/state-machines/media-properties.ts +82 -82
  18. package/src/state-machines/media-source.ts +129 -129
  19. package/src/state-machines/media.ts +255 -255
  20. package/src/state-machines/subtitles.ts +285 -285
  21. package/src/state-machines/thumbnails.ts +123 -123
  22. package/src/state-machines/utils.ts +94 -94
  23. package/src/utils/actor-utils.ts +19 -19
  24. package/src/utils/colors.ts +8 -8
  25. package/src/utils/context.ts +23 -23
  26. package/src/utils/fonts.ts +159 -159
  27. package/src/utils/index.ts +229 -229
  28. package/src/utils/languages.ts +262 -262
  29. package/src/utils/mp4box.ts +74 -74
  30. package/src/utils/time.ts +15 -15
  31. package/src/utils/use-local-storage.ts +30 -30
  32. package/src/utils/use-scrub.ts +40 -40
  33. package/src/utils/volume-utils.ts +39 -39
  34. package/src/utils/window-height.ts +19 -19
  35. package/src/vite-env.d.ts +1 -1
  36. package/tsconfig.json +28 -28
  37. package/tsconfig.node.json +9 -9
package/src/utils/fonts.ts CHANGED
@@ -1,160 +1,160 @@
1
- export const fonts = {
2
- headings: {
3
- large: `
4
- font-weight: 600;
5
- font-size: 2.8rem;
6
- line-height: 3.4rem;
7
- @media (min-width: 960px) {
8
- font-size: 3.4rem;
9
- line-height: 4.1rem;
10
- }
11
- `,
12
- medium: `
13
- font-weight: 600;
14
- font-size: 2.4rem;
15
- line-height: 2.9rem;
16
- @media (min-width: 960px) {
17
- font-size: 2.8rem;
18
- line-height: 3.4rem;
19
- }
20
- `,
21
- small: `
22
- font-weight: 500;
23
- font-size: 1.8rem;
24
- line-height: 1.9rem;
25
- @media (min-width: 960px) {
26
- font-size: 1.8rem;
27
- line-height: 2.2rem;
28
- }
29
- @media (min-width: 2560px) {
30
- font-size: 2.2rem;
31
- line-height: 2.6rem;
32
- }
33
- `,
34
- extraSmall: `
35
- font-weight: 500;
36
- font-size: 1.4rem;
37
- line-height: 1.7rem;
38
- @media (min-width: 960px) {
39
- font-size: 1.6rem;
40
- line-height: 1.9rem;
41
- }
42
- `
43
- },
44
- bLarge: {
45
- bold: `
46
- font-weight: 600;
47
- font-size: 1.4rem;
48
- line-height: 2rem;
49
- @media (min-width: 960px) {
50
- font-size: 1.6rem;
51
- line-height: 2.2rem;
52
- }
53
- `,
54
- medium: `
55
- font-weight: 500;
56
- font-size: 1.4rem;
57
- line-height: 2rem;
58
- @media (min-width: 960px) {
59
- font-size: 1.6rem;
60
- line-height: 2.2rem;
61
- }
62
- `,
63
- regular: `
64
- font-weight: 400;
65
- font-size: 1.4rem;
66
- line-height: 2rem;
67
- @media (min-width: 960px) {
68
- font-size: 1.6rem;
69
- line-height: 2.2rem;
70
- }
71
- `,
72
- },
73
- bMedium: {
74
- bold: `
75
- font-weight: 600;
76
- font-size: 1.2rem;
77
- line-height: 1.7rem;
78
- @media (min-width: 960px) {
79
- font-size: 1.4rem;
80
- line-height: 2rem;
81
- }
82
- `,
83
- medium: `
84
- font-weight: 500;
85
- font-size: 1.2rem;
86
- line-height: 1.7rem;
87
- @media (min-width: 960px) {
88
- font-size: 1.4rem;
89
- line-height: 2rem;
90
- }
91
- `,
92
- regular: `
93
- font-weight: 400;
94
- font-size: 1.2rem;
95
- line-height: 1.7rem;
96
- @media (min-width: 960px) {
97
- font-size: 1.4rem;
98
- line-height: 2rem;
99
- }
100
- `,
101
- },
102
- bSmall: {
103
- bold: `
104
- font-weight: 600;
105
- font-size: 1rem;
106
- line-height: 1.4rem;
107
- @media (min-width: 960px) {
108
- font-size: 1.2rem;
109
- line-height: 1.7rem;
110
- }
111
- `,
112
- medium: `
113
- font-weight: 500;
114
- font-size: 1rem;
115
- line-height: 1.4rem;
116
- @media (min-width: 960px) {
117
- font-size: 1.2rem;
118
- line-height: 1.7rem;
119
- }
120
- `,
121
- regular: `
122
- font-weight: 400;
123
- font-size: 1rem;
124
- line-height: 1.4rem;
125
- @media (min-width: 960px) {
126
- font-size: 1.2rem;
127
- line-height: 1.7rem;
128
- }
129
- `,
130
- },
131
- bExtraSmall: {
132
- bold: `
133
- font-weight: 600;
134
- font-size: 0.8rem;
135
- line-height: 1.1rem;
136
- @media (min-width: 960px) {
137
- font-size: 1rem;
138
- line-height: 1.4rem;
139
- }
140
- `,
141
- medium: `
142
- font-weight: 500;
143
- font-size: 0.8rem;
144
- line-height: 1.1rem;
145
- @media (min-width: 960px) {
146
- font-size: 1rem;
147
- line-height: 1.4rem;
148
- }
149
- `,
150
- regular: `
151
- font-weight: 400;
152
- font-size: 0.8rem;
153
- line-height: 1.1rem;
154
- @media (min-width: 960px) {
155
- font-size: 1rem;
156
- line-height: 1.4rem;
157
- }
158
- `,
159
- },
1
+ export const fonts = {
2
+ headings: {
3
+ large: `
4
+ font-weight: 600;
5
+ font-size: 2.8rem;
6
+ line-height: 3.4rem;
7
+ @media (min-width: 960px) {
8
+ font-size: 3.4rem;
9
+ line-height: 4.1rem;
10
+ }
11
+ `,
12
+ medium: `
13
+ font-weight: 600;
14
+ font-size: 2.4rem;
15
+ line-height: 2.9rem;
16
+ @media (min-width: 960px) {
17
+ font-size: 2.8rem;
18
+ line-height: 3.4rem;
19
+ }
20
+ `,
21
+ small: `
22
+ font-weight: 500;
23
+ font-size: 1.8rem;
24
+ line-height: 1.9rem;
25
+ @media (min-width: 960px) {
26
+ font-size: 1.8rem;
27
+ line-height: 2.2rem;
28
+ }
29
+ @media (min-width: 2560px) {
30
+ font-size: 2.2rem;
31
+ line-height: 2.6rem;
32
+ }
33
+ `,
34
+ extraSmall: `
35
+ font-weight: 500;
36
+ font-size: 1.4rem;
37
+ line-height: 1.7rem;
38
+ @media (min-width: 960px) {
39
+ font-size: 1.6rem;
40
+ line-height: 1.9rem;
41
+ }
42
+ `
43
+ },
44
+ bLarge: {
45
+ bold: `
46
+ font-weight: 600;
47
+ font-size: 1.4rem;
48
+ line-height: 2rem;
49
+ @media (min-width: 960px) {
50
+ font-size: 1.6rem;
51
+ line-height: 2.2rem;
52
+ }
53
+ `,
54
+ medium: `
55
+ font-weight: 500;
56
+ font-size: 1.4rem;
57
+ line-height: 2rem;
58
+ @media (min-width: 960px) {
59
+ font-size: 1.6rem;
60
+ line-height: 2.2rem;
61
+ }
62
+ `,
63
+ regular: `
64
+ font-weight: 400;
65
+ font-size: 1.4rem;
66
+ line-height: 2rem;
67
+ @media (min-width: 960px) {
68
+ font-size: 1.6rem;
69
+ line-height: 2.2rem;
70
+ }
71
+ `,
72
+ },
73
+ bMedium: {
74
+ bold: `
75
+ font-weight: 600;
76
+ font-size: 1.2rem;
77
+ line-height: 1.7rem;
78
+ @media (min-width: 960px) {
79
+ font-size: 1.4rem;
80
+ line-height: 2rem;
81
+ }
82
+ `,
83
+ medium: `
84
+ font-weight: 500;
85
+ font-size: 1.2rem;
86
+ line-height: 1.7rem;
87
+ @media (min-width: 960px) {
88
+ font-size: 1.4rem;
89
+ line-height: 2rem;
90
+ }
91
+ `,
92
+ regular: `
93
+ font-weight: 400;
94
+ font-size: 1.2rem;
95
+ line-height: 1.7rem;
96
+ @media (min-width: 960px) {
97
+ font-size: 1.4rem;
98
+ line-height: 2rem;
99
+ }
100
+ `,
101
+ },
102
+ bSmall: {
103
+ bold: `
104
+ font-weight: 600;
105
+ font-size: 1rem;
106
+ line-height: 1.4rem;
107
+ @media (min-width: 960px) {
108
+ font-size: 1.2rem;
109
+ line-height: 1.7rem;
110
+ }
111
+ `,
112
+ medium: `
113
+ font-weight: 500;
114
+ font-size: 1rem;
115
+ line-height: 1.4rem;
116
+ @media (min-width: 960px) {
117
+ font-size: 1.2rem;
118
+ line-height: 1.7rem;
119
+ }
120
+ `,
121
+ regular: `
122
+ font-weight: 400;
123
+ font-size: 1rem;
124
+ line-height: 1.4rem;
125
+ @media (min-width: 960px) {
126
+ font-size: 1.2rem;
127
+ line-height: 1.7rem;
128
+ }
129
+ `,
130
+ },
131
+ bExtraSmall: {
132
+ bold: `
133
+ font-weight: 600;
134
+ font-size: 0.8rem;
135
+ line-height: 1.1rem;
136
+ @media (min-width: 960px) {
137
+ font-size: 1rem;
138
+ line-height: 1.4rem;
139
+ }
140
+ `,
141
+ medium: `
142
+ font-weight: 500;
143
+ font-size: 0.8rem;
144
+ line-height: 1.1rem;
145
+ @media (min-width: 960px) {
146
+ font-size: 1rem;
147
+ line-height: 1.4rem;
148
+ }
149
+ `,
150
+ regular: `
151
+ font-weight: 400;
152
+ font-size: 0.8rem;
153
+ line-height: 1.1rem;
154
+ @media (min-width: 960px) {
155
+ font-size: 1rem;
156
+ line-height: 1.4rem;
157
+ }
158
+ `,
159
+ },
160
160
  }