@thinkpixellab-public/px-vue 3.0.54 → 3.0.55
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/components/PxGsapScrubber.vue +145 -0
- package/components/PxMeasureContainer.vue +84 -0
- package/components/PxScrubber.vue +143 -0
- package/package.json +1 -1
- package/utils/utils.js +6 -0
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
|
|
5
|
+
<template>
|
|
6
|
+
<div :class="bem()">
|
|
7
|
+
<px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
|
|
8
|
+
<px-scrubber
|
|
9
|
+
:class="bem('scrubber')"
|
|
10
|
+
v-model="progress"
|
|
11
|
+
@seek="seek"
|
|
12
|
+
@dragstart="dragStart"
|
|
13
|
+
@dragend="dragEnd"
|
|
14
|
+
/>
|
|
15
|
+
<span :class="bem('time')">{{ time }}</span>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
// import { mapState } from 'vuex';
|
|
21
|
+
// import Component from '~/components/Component.vue';
|
|
22
|
+
// import Mixin from '~/components/Mixin.vue';
|
|
23
|
+
import PxIconButton from './PxIconButton.vue';
|
|
24
|
+
import PxScrubber from './PxScrubber.vue';
|
|
25
|
+
|
|
26
|
+
export default {
|
|
27
|
+
name: 'px-gsap-scrubber',
|
|
28
|
+
components: { PxIconButton, PxScrubber },
|
|
29
|
+
// mixins: [ Mixin ],
|
|
30
|
+
// props: { a: { type: Boolean, default: false } },
|
|
31
|
+
data() {
|
|
32
|
+
return { timeline: null, progress: 0, isPlaying: false };
|
|
33
|
+
},
|
|
34
|
+
computed: {
|
|
35
|
+
currentButtonIcon() {
|
|
36
|
+
return this.isPlaying
|
|
37
|
+
? require('../assets/feather/pause-circle.svg')
|
|
38
|
+
: require('../assets/feather/play-circle.svg');
|
|
39
|
+
},
|
|
40
|
+
time() {
|
|
41
|
+
if (this.timeline) {
|
|
42
|
+
let t = this.timeline;
|
|
43
|
+
let seconds = t.duration() * this.progress;
|
|
44
|
+
let mins = Math.floor(seconds / 60);
|
|
45
|
+
|
|
46
|
+
seconds -= mins * 60;
|
|
47
|
+
seconds = Math.round(seconds * 100);
|
|
48
|
+
seconds = seconds.toString().padStart(4, '0');
|
|
49
|
+
seconds = seconds.slice(0, 2) + '.' + seconds.slice(2, 4);
|
|
50
|
+
|
|
51
|
+
mins = Math.round(mins || 0)
|
|
52
|
+
.toString()
|
|
53
|
+
.padStart(2, '0');
|
|
54
|
+
|
|
55
|
+
return `${mins}:${seconds}`;
|
|
56
|
+
}
|
|
57
|
+
return null;
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
// watch: {},
|
|
61
|
+
// mounted() {},
|
|
62
|
+
beforeUnmount() {
|
|
63
|
+
if (this.timeline) {
|
|
64
|
+
this.timeline.eventCallback('onUpdate', null);
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
methods: {
|
|
68
|
+
buttonClick() {
|
|
69
|
+
if (this.isPlaying) {
|
|
70
|
+
this.pause();
|
|
71
|
+
} else {
|
|
72
|
+
this.play();
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
setTimeline(t) {
|
|
76
|
+
// TODO: a timeline can only have one handler for onUpdate so if we're using this already
|
|
77
|
+
// we would need to somehow and capture and proxy the event from within our handler
|
|
78
|
+
|
|
79
|
+
if (this.timeline) {
|
|
80
|
+
this.timeline.eventCallback('onUpdate', null);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
this.timeline = t;
|
|
84
|
+
this.progress = this.timeline.progress();
|
|
85
|
+
this.isPlaying = !this.timeline.paused();
|
|
86
|
+
|
|
87
|
+
this.timeline.eventCallback('onUpdate', () => {
|
|
88
|
+
this.progress = this.timeline.progress();
|
|
89
|
+
this.isPlaying = !this.timeline.paused();
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
pause() {
|
|
93
|
+
if (this.timeline) {
|
|
94
|
+
this.isPlaying = false;
|
|
95
|
+
this.timeline.pause();
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
play() {
|
|
99
|
+
if (this.timeline) {
|
|
100
|
+
this.isPlaying = true;
|
|
101
|
+
this.timeline.play();
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
dragStart() {
|
|
105
|
+
this.wasPlaying = this.isPlaying;
|
|
106
|
+
this.pause();
|
|
107
|
+
},
|
|
108
|
+
dragEnd() {
|
|
109
|
+
if (this.wasPlaying) {
|
|
110
|
+
this.play();
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
seek(e) {
|
|
114
|
+
this.timeline.progress(e.progress);
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<style lang="scss">
|
|
121
|
+
@use '../styles/px.scss' as *;
|
|
122
|
+
|
|
123
|
+
.px-gsap-scrubber {
|
|
124
|
+
width: 100%;
|
|
125
|
+
padding: 0.25em 1em;
|
|
126
|
+
display: flex;
|
|
127
|
+
gap: 0.5em;
|
|
128
|
+
align-items: center;
|
|
129
|
+
|
|
130
|
+
&__button {
|
|
131
|
+
flex: none;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&__scrubber {
|
|
135
|
+
flex: 1;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&__time {
|
|
139
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
140
|
+
font-weight: bold;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
}
|
|
143
|
+
// add styles here
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
<template>
|
|
5
|
+
<div :class="bem()">
|
|
6
|
+
<div v-if="measuring" ref="container" :class="[bem('container'), containerClass]">
|
|
7
|
+
<div ref="content" :class="bem('content')">
|
|
8
|
+
<slot />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
import BaseDebug from '@thinkpixellab/px-edge-shared/components/common/BaseDebug.vue';
|
|
16
|
+
import PxBaseResize from './PxBaseResize.vue';
|
|
17
|
+
|
|
18
|
+
export default {
|
|
19
|
+
name: 'px-measure-container',
|
|
20
|
+
// components: { Component },
|
|
21
|
+
mixins: [BaseDebug, PxBaseResize],
|
|
22
|
+
props: {
|
|
23
|
+
containerClass: { type: String, default: null },
|
|
24
|
+
autoUpdate: { type: Boolean, default: true },
|
|
25
|
+
|
|
26
|
+
// a delay inserted after the content has been hydrated and before measuring the size, if another update
|
|
27
|
+
// occurs during the delay, the previous update will be cancelled
|
|
28
|
+
delay: { type: Number, default: 50 },
|
|
29
|
+
},
|
|
30
|
+
data() {
|
|
31
|
+
return { measuring: false, size: { width: 0, height: 0 } };
|
|
32
|
+
},
|
|
33
|
+
methods: {
|
|
34
|
+
resize() {
|
|
35
|
+
if (this.autoUpdate) {
|
|
36
|
+
this.update();
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
update(onComplete) {
|
|
40
|
+
if (this.timeout) {
|
|
41
|
+
clearTimeout(this.timeout);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
this.measuring = true;
|
|
45
|
+
|
|
46
|
+
this.timeout = setTimeout(() => {
|
|
47
|
+
this.$emit('measure', this.$refs.content);
|
|
48
|
+
|
|
49
|
+
const size = {
|
|
50
|
+
width: this.$refs.content.offsetWidth,
|
|
51
|
+
height: this.$refs.content.offsetHeight,
|
|
52
|
+
};
|
|
53
|
+
this.size = size;
|
|
54
|
+
|
|
55
|
+
if (onComplete) {
|
|
56
|
+
onComplete(size);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
this.$emit('update', size);
|
|
60
|
+
|
|
61
|
+
this.measuring = false;
|
|
62
|
+
}, this.delay);
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style lang="scss">
|
|
69
|
+
@import '@/styles/include.scss';
|
|
70
|
+
.px-measure-container {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
position: absolute;
|
|
74
|
+
|
|
75
|
+
&__container {
|
|
76
|
+
position: absolute;
|
|
77
|
+
width: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&__content {
|
|
81
|
+
position: relative;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Describe this component...
|
|
3
|
+
-->
|
|
4
|
+
<template>
|
|
5
|
+
<div
|
|
6
|
+
:class="bem()"
|
|
7
|
+
@mouseenter="mouseEnter"
|
|
8
|
+
@mousemove="mouseMove"
|
|
9
|
+
@mouseleave="mouseLeave"
|
|
10
|
+
@mousedown="mouseDown"
|
|
11
|
+
@mouseup="mouseUp"
|
|
12
|
+
>
|
|
13
|
+
<div :class="bem('scrubber')">
|
|
14
|
+
<div :class="bem('progress')" :style="{ width: cssPcnt(progressValue) }"></div>
|
|
15
|
+
<div
|
|
16
|
+
v-if="!dragging"
|
|
17
|
+
:class="bem('preview')"
|
|
18
|
+
:style="{ width: cssPcnt(previewProgress) }"
|
|
19
|
+
></div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
// import { mapState } from 'vuex';
|
|
26
|
+
// import Component from '~/components/Component.vue';
|
|
27
|
+
// import Mixin from '~/components/Mixin.vue';
|
|
28
|
+
export default {
|
|
29
|
+
name: 'px-scrubber',
|
|
30
|
+
model: {
|
|
31
|
+
prop: 'progress',
|
|
32
|
+
event: 'update:progress',
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
props: {
|
|
36
|
+
progress: { type: Number, default: 0.5 },
|
|
37
|
+
dragEnabled: { type: Boolean, default: true },
|
|
38
|
+
},
|
|
39
|
+
data() {
|
|
40
|
+
return {
|
|
41
|
+
dragging: false,
|
|
42
|
+
previewing: false,
|
|
43
|
+
previewProgress: 0,
|
|
44
|
+
progressValue: this.progress,
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
watch: {
|
|
48
|
+
progress(nv) {
|
|
49
|
+
// update progressValue when progress changes
|
|
50
|
+
this.progressValue = nv;
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
progressValue(nv) {
|
|
54
|
+
// emit update when progressValue changes (enables .sync on parent)
|
|
55
|
+
this.$emit('update:progress', nv);
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
mouseEnter() {
|
|
60
|
+
this.previewing = true;
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
mouseLeave() {
|
|
64
|
+
clearTimeout(this.previewingTimeout);
|
|
65
|
+
this.previewingTimeout = setTimeout(() => {
|
|
66
|
+
this.previewing = false;
|
|
67
|
+
}, 20);
|
|
68
|
+
//this.previewing = false;
|
|
69
|
+
|
|
70
|
+
this.previewProgress = 0;
|
|
71
|
+
},
|
|
72
|
+
mouseDown(e) {
|
|
73
|
+
const progress = e.offsetX / this.$el.offsetWidth;
|
|
74
|
+
this.$emit('seek', { progress });
|
|
75
|
+
|
|
76
|
+
if (this.dragEnabled) {
|
|
77
|
+
this.dragging = true;
|
|
78
|
+
this.$emit('dragstart');
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
mouseUp(e) {
|
|
83
|
+
if (this.dragging) {
|
|
84
|
+
this.dragging = false;
|
|
85
|
+
this.$emit('dragend');
|
|
86
|
+
}
|
|
87
|
+
e.stopPropagation();
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
},
|
|
90
|
+
|
|
91
|
+
mouseMove(e) {
|
|
92
|
+
const progress = e.offsetX / this.$el.offsetWidth;
|
|
93
|
+
if (this.dragging) {
|
|
94
|
+
this.$emit('seek', { progress });
|
|
95
|
+
} else if (this.previewing) {
|
|
96
|
+
this.previewProgress = progress;
|
|
97
|
+
}
|
|
98
|
+
e.stopPropagation();
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
</script>
|
|
104
|
+
|
|
105
|
+
<style lang="scss">
|
|
106
|
+
@use '../styles/px.scss' as *;
|
|
107
|
+
|
|
108
|
+
.px-scrubber {
|
|
109
|
+
@at-root :root {
|
|
110
|
+
--px-scrubber-height: 4px;
|
|
111
|
+
--px-scrubber-bg: #{clr(accent, 0, 0.1)};
|
|
112
|
+
--px-scrubber-padding: 1em 0;
|
|
113
|
+
--px-scrubber-progress-bg: #{clr(accent, 0, 1)};
|
|
114
|
+
--px-scrubber-preview-bg: #{clr(accent, 0, 0.5)};
|
|
115
|
+
}
|
|
116
|
+
width: 100%;
|
|
117
|
+
padding: var(--px-scrubber-padding);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
|
|
120
|
+
&__scrubber {
|
|
121
|
+
position: relative;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: var(--px-scrubber-height);
|
|
124
|
+
background: var(--px-scrubber-bg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&__progress,
|
|
128
|
+
&__preview {
|
|
129
|
+
position: absolute;
|
|
130
|
+
left: 0;
|
|
131
|
+
top: 0;
|
|
132
|
+
height: 100%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&__preview {
|
|
136
|
+
background: var(--px-scrubber-preview-bg);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&__progress {
|
|
140
|
+
background: var(--px-scrubber-progress-bg);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|
package/package.json
CHANGED