Skip to content

Commit

Permalink
chore(repo): Format files with prettier (#19)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lms24 authored Jan 19, 2023
1 parent cda9277 commit c5df542
Show file tree
Hide file tree
Showing 13 changed files with 225 additions and 186 deletions.
75 changes: 37 additions & 38 deletions packages/rrdom/src/style.ts
Original file line number Diff line number Diff line change
@@ -1,40 +1,39 @@
export function parseCSSText(cssText: string): Record<string, string> {
const res: Record<string, string> = {};
const listDelimiter = /;(?![^(]*\))/g;
const propertyDelimiter = /:(.+)/;
cssText.split(listDelimiter).forEach(function (item) {
if (item) {
const tmp = item.split(propertyDelimiter);
tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
}
});
return res;
const res: Record<string, string> = {};
const listDelimiter = /;(?![^(]*\))/g;
const propertyDelimiter = /:(.+)/;
cssText.split(listDelimiter).forEach(function (item) {
if (item) {
const tmp = item.split(propertyDelimiter);
tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
}
});
return res;
}

export function toCSSText(style: Record<string, string>): string {
const properties = [];
for (let name in style) {
const value = style[name];
if (typeof value !== 'string') continue;
const normalizedName = hyphenate(name);
properties.push(`${normalizedName}:${value};`);
}

export function toCSSText(style: Record<string, string>): string {
const properties = [];
for (let name in style) {
const value = style[name];
if (typeof value !== 'string') continue;
const normalizedName = hyphenate(name);
properties.push(`${normalizedName}:${value};`);
}
return properties.join(' ');
}

/**
* Camelize a hyphen-delimited string.
*/
const camelizeRE = /-(\w)/g;
export const camelize = (str: string): string => {
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
};

/**
* Hyphenate a camelCase string.
*/
const hyphenateRE = /\B([A-Z])/g;
export const hyphenate = (str: string): string => {
return str.replace(hyphenateRE, '-$1').toLowerCase();
};

return properties.join(' ');
}

/**
* Camelize a hyphen-delimited string.
*/
const camelizeRE = /-(\w)/g;
export const camelize = (str: string): string => {
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
};

/**
* Hyphenate a camelCase string.
*/
const hyphenateRE = /\B([A-Z])/g;
export const hyphenate = (str: string): string => {
return str.replace(hyphenateRE, '-$1').toLowerCase();
};
226 changes: 118 additions & 108 deletions packages/rrweb-player/src/Controller.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
percent = 1;
}
const timeOffset = meta.totalTime * percent;
finished = false
finished = false;
goto(timeOffset);
};
Expand All @@ -188,8 +188,8 @@
export const triggerUpdateMeta = () => {
Promise.resolve().then(() => {
meta = replayer.getMetaData();
})
}
});
};
onMount(() => {
playerState = replayer.service.state.value as typeof playerState;
Expand Down Expand Up @@ -237,99 +237,6 @@
});
</script>

<style>
.rr-controller {
width: 100%;
height: 80px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-radius: 0 0 5px 5px;
}
.rr-timeline {
width: 80%;
display: flex;
align-items: center;
}
.rr-timeline__time {
display: inline-block;
width: 100px;
text-align: center;
color: #11103e;
}
.rr-progress {
flex: 1;
height: 12px;
background: #eee;
position: relative;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.rr-progress.disabled {
cursor: not-allowed;
}
.rr-progress__step {
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #e0e1fe;
}
.rr-progress__handler {
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
top: 2px;
transform: translate(-50%, -50%);
background: rgb(73, 80, 246);
}
.rr-controller__btns {
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.rr-controller__btns button {
width: 32px;
height: 32px;
display: flex;
padding: 0;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
}
.rr-controller__btns button:active {
background: #e0e1fe;
}
.rr-controller__btns button.active {
color: #fff;
background: rgb(73, 80, 246);
}
.rr-controller__btns button:disabled {
cursor: not-allowed;
}
</style>

{#if showController}
<div class="rr-controller">
<div class="rr-timeline">
Expand All @@ -338,17 +245,20 @@
class="rr-progress"
class:disabled={speedState === 'skipping'}
bind:this={progress}
on:click={(event) => handleProgressClick(event)}>
on:click={(event) => handleProgressClick(event)}
>
<div
class="rr-progress__step"
bind:this={step}
style="width: {percentage}" />
style="width: {percentage}"
/>
{#each customEvents as event}
<div
title={event.name}
style="width: 10px;height: 5px;position: absolute;top:
2px;transform: translate(-50%, -50%);background: {event.background};left:
{event.position};" />
{event.position};"
/>
{/each}

<div class="rr-progress__handler" style="left: {percentage}" />
Expand All @@ -365,7 +275,8 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16">
height="16"
>
<path
d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0
512q0 53.00224-37.49888 90.50112t-90.50112
Expand All @@ -380,7 +291,8 @@
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984
213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0
17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z" />
12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"
/>
</svg>
{:else}
<svg
Expand All @@ -390,26 +302,30 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16">
height="16"
>
<path
d="M170.65984 896l0-768 640 384zM644.66944
512l-388.66944-233.32864 0 466.65728z" />
512l-388.66944-233.32864 0 466.65728z"
/>
</svg>
{/if}
</button>
{#each speedOption as s}
<button
class:active={s === speed && speedState !== 'skipping'}
on:click={() => setSpeed(s)}
disabled={speedState === 'skipping'}>
disabled={speedState === 'skipping'}
>
{s}x
</button>
{/each}
<Switch
id="skip"
bind:checked={skipInactive}
disabled={speedState === 'skipping'}
label="skip inactive" />
label="skip inactive"
/>
<button on:click={() => dispatch('fullscreen')}>
<svg
class="icon"
Expand All @@ -418,10 +334,10 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16">
height="16"
>
<defs>
<style type="text/css">
</style>
</defs>
<path
Expand All @@ -432,9 +348,103 @@
48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
p-id="1286" />
p-id="1286"
/>
</svg>
</button>
</div>
</div>
{/if}

<style>
.rr-controller {
width: 100%;
height: 80px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-radius: 0 0 5px 5px;
}
.rr-timeline {
width: 80%;
display: flex;
align-items: center;
}
.rr-timeline__time {
display: inline-block;
width: 100px;
text-align: center;
color: #11103e;
}
.rr-progress {
flex: 1;
height: 12px;
background: #eee;
position: relative;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
border-top: solid 4px #fff;
border-bottom: solid 4px #fff;
}
.rr-progress.disabled {
cursor: not-allowed;
}
.rr-progress__step {
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #e0e1fe;
}
.rr-progress__handler {
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
top: 2px;
transform: translate(-50%, -50%);
background: rgb(73, 80, 246);
}
.rr-controller__btns {
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.rr-controller__btns button {
width: 32px;
height: 32px;
display: flex;
padding: 0;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
}
.rr-controller__btns button:active {
background: #e0e1fe;
}
.rr-controller__btns button.active {
color: #fff;
background: rgb(73, 80, 246);
}
.rr-controller__btns button:disabled {
cursor: not-allowed;
}
</style>
Loading

0 comments on commit c5df542

Please sign in to comment.