Skip to content

Commit c5df542

Browse files
Lms24Lms24
authored
chore(repo): Format files with prettier (#19)
1 parent cda9277 commit c5df542

13 files changed

Lines changed: 225 additions & 186 deletions

File tree

‎packages/rrdom/src/style.ts‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
11
export function parseCSSText(cssText: string): Record<string, string> {
2-
const res: Record<string, string> = {};
3-
const listDelimiter = /;(?![^(]*\))/g;
4-
const propertyDelimiter = /:(.+)/;
5-
cssText.split(listDelimiter).forEach(function (item) {
6-
if (item) {
7-
const tmp = item.split(propertyDelimiter);
8-
tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
9-
}
10-
});
11-
return res;
2+
const res: Record<string, string> = {};
3+
const listDelimiter = /;(?![^(]*\))/g;
4+
const propertyDelimiter = /:(.+)/;
5+
cssText.split(listDelimiter).forEach(function (item) {
6+
if (item) {
7+
const tmp = item.split(propertyDelimiter);
8+
tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
9+
}
10+
});
11+
return res;
12+
}
13+
14+
export function toCSSText(style: Record<string, string>): string {
15+
const properties = [];
16+
for (let name in style) {
17+
const value = style[name];
18+
if (typeof value !== 'string') continue;
19+
const normalizedName = hyphenate(name);
20+
properties.push(`${normalizedName}:${value};`);
1221
}
13-
14-
export function toCSSText(style: Record<string, string>): string {
15-
const properties = [];
16-
for (let name in style) {
17-
const value = style[name];
18-
if (typeof value !== 'string') continue;
19-
const normalizedName = hyphenate(name);
20-
properties.push(`${normalizedName}:${value};`);
21-
}
22-
return properties.join(' ');
23-
}
24-
25-
/**
26-
* Camelize a hyphen-delimited string.
27-
*/
28-
const camelizeRE = /-(\w)/g;
29-
export const camelize = (str: string): string => {
30-
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
31-
};
32-
33-
/**
34-
* Hyphenate a camelCase string.
35-
*/
36-
const hyphenateRE = /\B([A-Z])/g;
37-
export const hyphenate = (str: string): string => {
38-
return str.replace(hyphenateRE, '-$1').toLowerCase();
39-
};
40-
22+
return properties.join(' ');
23+
}
24+
25+
/**
26+
* Camelize a hyphen-delimited string.
27+
*/
28+
const camelizeRE = /-(\w)/g;
29+
export const camelize = (str: string): string => {
30+
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
31+
};
32+
33+
/**
34+
* Hyphenate a camelCase string.
35+
*/
36+
const hyphenateRE = /\B([A-Z])/g;
37+
export const hyphenate = (str: string): string => {
38+
return str.replace(hyphenateRE, '-$1').toLowerCase();
39+
};

‎packages/rrweb-player/src/Controller.svelte‎

Lines changed: 118 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165
percent = 1;
166166
}
167167
const timeOffset = meta.totalTime * percent;
168-
finished = false
168+
finished = false;
169169
goto(timeOffset);
170170
};
171171
@@ -188,8 +188,8 @@
188188
export const triggerUpdateMeta = () => {
189189
Promise.resolve().then(() => {
190190
meta = replayer.getMetaData();
191-
})
192-
}
191+
});
192+
};
193193
194194
onMount(() => {
195195
playerState = replayer.service.state.value as typeof playerState;
@@ -237,99 +237,6 @@
237237
});
238238
</script>
239239

240-
<style>
241-
.rr-controller {
242-
width: 100%;
243-
height: 80px;
244-
background: #fff;
245-
display: flex;
246-
flex-direction: column;
247-
justify-content: space-around;
248-
align-items: center;
249-
border-radius: 0 0 5px 5px;
250-
}
251-
252-
.rr-timeline {
253-
width: 80%;
254-
display: flex;
255-
align-items: center;
256-
}
257-
258-
.rr-timeline__time {
259-
display: inline-block;
260-
width: 100px;
261-
text-align: center;
262-
color: #11103e;
263-
}
264-
265-
.rr-progress {
266-
flex: 1;
267-
height: 12px;
268-
background: #eee;
269-
position: relative;
270-
border-radius: 3px;
271-
cursor: pointer;
272-
box-sizing: border-box;
273-
border-top: solid 4px #fff;
274-
border-bottom: solid 4px #fff;
275-
}
276-
277-
.rr-progress.disabled {
278-
cursor: not-allowed;
279-
}
280-
281-
.rr-progress__step {
282-
height: 100%;
283-
position: absolute;
284-
left: 0;
285-
top: 0;
286-
background: #e0e1fe;
287-
}
288-
289-
.rr-progress__handler {
290-
width: 20px;
291-
height: 20px;
292-
border-radius: 10px;
293-
position: absolute;
294-
top: 2px;
295-
transform: translate(-50%, -50%);
296-
background: rgb(73, 80, 246);
297-
}
298-
299-
.rr-controller__btns {
300-
display: flex;
301-
align-items: center;
302-
justify-content: center;
303-
font-size: 13px;
304-
}
305-
306-
.rr-controller__btns button {
307-
width: 32px;
308-
height: 32px;
309-
display: flex;
310-
padding: 0;
311-
align-items: center;
312-
justify-content: center;
313-
background: none;
314-
border: none;
315-
border-radius: 50%;
316-
cursor: pointer;
317-
}
318-
319-
.rr-controller__btns button:active {
320-
background: #e0e1fe;
321-
}
322-
323-
.rr-controller__btns button.active {
324-
color: #fff;
325-
background: rgb(73, 80, 246);
326-
}
327-
328-
.rr-controller__btns button:disabled {
329-
cursor: not-allowed;
330-
}
331-
</style>
332-
333240
{#if showController}
334241
<div class="rr-controller">
335242
<div class="rr-timeline">
@@ -338,17 +245,20 @@
338245
class="rr-progress"
339246
class:disabled={speedState === 'skipping'}
340247
bind:this={progress}
341-
on:click={(event) => handleProgressClick(event)}>
248+
on:click={(event) => handleProgressClick(event)}
249+
>
342250
<div
343251
class="rr-progress__step"
344252
bind:this={step}
345-
style="width: {percentage}" />
253+
style="width: {percentage}"
254+
/>
346255
{#each customEvents as event}
347256
<div
348257
title={event.name}
349258
style="width: 10px;height: 5px;position: absolute;top:
350259
2px;transform: translate(-50%, -50%);background: {event.background};left:
351-
{event.position};" />
260+
{event.position};"
261+
/>
352262
{/each}
353263

354264
<div class="rr-progress__handler" style="left: {percentage}" />
@@ -365,7 +275,8 @@
365275
xmlns="http://www.w3.org/2000/svg"
366276
xmlns:xlink="http://www.w3.org/1999/xlink"
367277
width="16"
368-
height="16">
278+
height="16"
279+
>
369280
<path
370281
d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0
371282
512q0 53.00224-37.49888 90.50112t-90.50112
@@ -380,7 +291,8 @@
380291
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984
381292
213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0
382293
17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928
383-
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z" />
294+
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"
295+
/>
384296
</svg>
385297
{:else}
386298
<svg
@@ -390,26 +302,30 @@
390302
xmlns="http://www.w3.org/2000/svg"
391303
xmlns:xlink="http://www.w3.org/1999/xlink"
392304
width="16"
393-
height="16">
305+
height="16"
306+
>
394307
<path
395308
d="M170.65984 896l0-768 640 384zM644.66944
396-
512l-388.66944-233.32864 0 466.65728z" />
309+
512l-388.66944-233.32864 0 466.65728z"
310+
/>
397311
</svg>
398312
{/if}
399313
</button>
400314
{#each speedOption as s}
401315
<button
402316
class:active={s === speed && speedState !== 'skipping'}
403317
on:click={() => setSpeed(s)}
404-
disabled={speedState === 'skipping'}>
318+
disabled={speedState === 'skipping'}
319+
>
405320
{s}x
406321
</button>
407322
{/each}
408323
<Switch
409324
id="skip"
410325
bind:checked={skipInactive}
411326
disabled={speedState === 'skipping'}
412-
label="skip inactive" />
327+
label="skip inactive"
328+
/>
413329
<button on:click={() => dispatch('fullscreen')}>
414330
<svg
415331
class="icon"
@@ -418,10 +334,10 @@
418334
xmlns="http://www.w3.org/2000/svg"
419335
xmlns:xlink="http://www.w3.org/1999/xlink"
420336
width="16"
421-
height="16">
337+
height="16"
338+
>
422339
<defs>
423340
<style type="text/css">
424-
425341
</style>
426342
</defs>
427343
<path
@@ -432,9 +348,103 @@
432348
48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
433349
48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
434350
68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
435-
p-id="1286" />
351+
p-id="1286"
352+
/>
436353
</svg>
437354
</button>
438355
</div>
439356
</div>
440357
{/if}
358+
359+
<style>
360+
.rr-controller {
361+
width: 100%;
362+
height: 80px;
363+
background: #fff;
364+
display: flex;
365+
flex-direction: column;
366+
justify-content: space-around;
367+
align-items: center;
368+
border-radius: 0 0 5px 5px;
369+
}
370+
371+
.rr-timeline {
372+
width: 80%;
373+
display: flex;
374+
align-items: center;
375+
}
376+
377+
.rr-timeline__time {
378+
display: inline-block;
379+
width: 100px;
380+
text-align: center;
381+
color: #11103e;
382+
}
383+
384+
.rr-progress {
385+
flex: 1;
386+
height: 12px;
387+
background: #eee;
388+
position: relative;
389+
border-radius: 3px;
390+
cursor: pointer;
391+
box-sizing: border-box;
392+
border-top: solid 4px #fff;
393+
border-bottom: solid 4px #fff;
394+
}
395+
396+
.rr-progress.disabled {
397+
cursor: not-allowed;
398+
}
399+
400+
.rr-progress__step {
401+
height: 100%;
402+
position: absolute;
403+
left: 0;
404+
top: 0;
405+
background: #e0e1fe;
406+
}
407+
408+
.rr-progress__handler {
409+
width: 20px;
410+
height: 20px;
411+
border-radius: 10px;
412+
position: absolute;
413+
top: 2px;
414+
transform: translate(-50%, -50%);
415+
background: rgb(73, 80, 246);
416+
}
417+
418+
.rr-controller__btns {
419+
display: flex;
420+
align-items: center;
421+
justify-content: center;
422+
font-size: 13px;
423+
}
424+
425+
.rr-controller__btns button {
426+
width: 32px;
427+
height: 32px;
428+
display: flex;
429+
padding: 0;
430+
align-items: center;
431+
justify-content: center;
432+
background: none;
433+
border: none;
434+
border-radius: 50%;
435+
cursor: pointer;
436+
}
437+
438+
.rr-controller__btns button:active {
439+
background: #e0e1fe;
440+
}
441+
442+
.rr-controller__btns button.active {
443+
color: #fff;
444+
background: rgb(73, 80, 246);
445+
}
446+
447+
.rr-controller__btns button:disabled {
448+
cursor: not-allowed;
449+
}
450+
</style>

0 commit comments

Comments
 (0)