@versa_ai/vmml-editor 1.0.12 → 1.0.13

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versa_ai/vmml-editor",
3
- "version": "1.0.12",
3
+ "version": "1.0.13",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.mjs",
6
6
  "types": "dist/index.d.mts",
@@ -16,8 +16,8 @@
16
16
  "remotion": "4.0.166",
17
17
  "uuid": "^10.0.0",
18
18
  "zod": "^3.23.8",
19
- "@versa_ai/vmml-player": "1.1.15",
20
- "@versa_ai/vmml-utils": "1.0.15"
19
+ "@versa_ai/vmml-utils": "1.0.15",
20
+ "@versa_ai/vmml-player": "1.1.15"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@biomejs/biome": "^1.7.1",
@@ -65,9 +65,9 @@
65
65
  //player与画布
66
66
  .main{
67
67
  // width: 81.467vw;
68
- // height: 144.8vw;
69
68
  width: 100%;
70
69
  height: 100%;
70
+ // height: 144.8vw;
71
71
  margin: auto;
72
72
  position: relative;
73
73
  display: flex;
@@ -79,10 +79,9 @@
79
79
  height: 100%;
80
80
  }
81
81
  .controls-box {
82
- height: 10%;
83
- // height: 12vw;
82
+ height: 12vw;
84
83
  position: absolute;
85
- bottom: -2%;
84
+ bottom: 0;
86
85
  width: 100%;
87
86
  border-radius: 3.2vw;
88
87
  }
@@ -91,7 +90,7 @@
91
90
  align-items: center;
92
91
  width: 100%;
93
92
  height: 100%;
94
- padding: 0 1%;
93
+ padding: 0 2.13vw;
95
94
  box-sizing: border-box;
96
95
  background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
97
96
  .mr-16 {
@@ -100,8 +99,8 @@
100
99
  .player-controls-toggle {
101
100
  >img {
102
101
  display: block;
103
- width: 26%;
104
- height: 26%;
102
+ width: 4.8vw;
103
+ height: 4.8vw;
105
104
  cursor: pointer;
106
105
  }
107
106
  }
@@ -254,3 +253,64 @@
254
253
  }
255
254
 
256
255
  }
256
+
257
+ @media screen and (min-width: 750px) {
258
+ .editor {
259
+ .controls-box {
260
+ height: 20% !important;
261
+ border-radius: 3.2vw;
262
+ }
263
+ .player-controls {
264
+ display: flex;
265
+ align-items: center;
266
+ width: 100%;
267
+ height: 100%;
268
+ padding: 0 1%;
269
+ .mr-16 {
270
+ margin-right: 2.13vw;
271
+ }
272
+ .player-controls-toggle {
273
+ >img {
274
+ display: block;
275
+ width: 40px !important;
276
+ height: 40px !important;
277
+ cursor: pointer;
278
+ }
279
+ }
280
+ .player-controls-seekbar {
281
+ flex: 1;
282
+ .seekbar-container {
283
+ height: 2px !important;
284
+ .seekbar-background {
285
+ height: 10px !important;
286
+ width: 100%;
287
+ border-radius: 1vw;
288
+ .seekbar-fill {
289
+ width: 100%;
290
+ height: 80%;
291
+ border-radius: 1vw;
292
+ }
293
+ .seekbar-line {
294
+ height: 100%;
295
+ border-radius: 1vw;
296
+ }
297
+ .seekbar-sign {
298
+ width: 10px;
299
+ top: 50%;
300
+ margin-top: -6px;
301
+ }
302
+ .seekbar-cirle {
303
+ top: -10px !important;
304
+ width: 40px !important;
305
+ height: 40px !important;
306
+ }
307
+ }
308
+ }
309
+ }
310
+ .player-controls-time {
311
+ width: 6vw !important;
312
+ }
313
+ }
314
+ }
315
+ }
316
+
package/src/index.tsx CHANGED
@@ -497,7 +497,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
497
497
  </section>
498
498
  </div>
499
499
  <div className="padding-box"></div>
500
- <section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
500
+ {
501
+ (maxText > 0 || maxVideo > 0) && <section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
501
502
  {
502
503
  maxText > 0 && (
503
504
  <div
@@ -525,6 +526,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
525
526
  )
526
527
  }
527
528
  </section>
529
+ }
530
+
528
531
  {
529
532
  maxVideo > 0 && (
530
533
  <VideoMenu menuState={menuState} createImage={createImage} videoMenus={videoMenus} />