Skip to content

Commit 543113e

Browse files
tayetaye
committed
feat(webgl-video-editor): enable asset bin feature
1 parent 6a16bc3 commit 543113e

4 files changed

Lines changed: 46 additions & 100 deletions

File tree

‎packages/app-video-editor/src/video-editor-toolbar.vue‎

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { ACCEPT_AUDIO_FILE_TYPES, ACCEPT_VIDEO_FILE_TYPES, AssetBin } from 'webg
1010
1111
import type { VideoEditor } from 'webgl-video-editor'
1212
import { state } from './state'
13-
import { FEAT_ASSET_BIN } from 'shared/video/constants'
1413
1514
const { editor } = defineProps<{ editor: VideoEditor }>()
1615
@@ -87,56 +86,52 @@ useEventListener(
8786
{{ $t('filters') }}
8887
</button>
8988

90-
<template v-if="FEAT_ASSET_BIN">
91-
<button
92-
class="toolbar-button"
93-
:aria-expanded="editor.activeAssetBin === AssetBin.audio"
94-
@click="
95-
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.audio ? null : AssetBin.audio)
89+
<button
90+
class="toolbar-button"
91+
:aria-expanded="editor.activeAssetBin === AssetBin.audio"
92+
@click="
93+
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.audio ? null : AssetBin.audio)
94+
"
95+
>
96+
<div
97+
:class="
98+
editor.activeAssetBin === AssetBin.audio ? 'icon i-tabler-music-search' : 'icon i-tabler-music'
9699
"
97-
>
98-
<div
99-
:class="
100-
editor.activeAssetBin === AssetBin.audio ? 'icon i-tabler-music-search' : 'icon i-tabler-music'
101-
"
102-
/>
103-
{{ $t('music') }}
104-
</button>
100+
/>
101+
{{ $t('music') }}
102+
</button>
105103

106-
<button
107-
class="toolbar-button"
108-
:aria-expanded="editor.activeAssetBin === AssetBin.video"
109-
@click="
110-
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.video ? null : AssetBin.video)
104+
<button
105+
class="toolbar-button"
106+
:aria-expanded="editor.activeAssetBin === AssetBin.video"
107+
@click="
108+
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.video ? null : AssetBin.video)
109+
"
110+
>
111+
<div
112+
:class="
113+
editor.activeAssetBin === AssetBin.video ? 'icon i-tabler-folder-filled' : 'icon i-tabler-folder'
111114
"
112-
>
113-
<div
114-
:class="
115-
editor.activeAssetBin === AssetBin.video
116-
? 'icon i-tabler-folder-filled'
117-
: 'icon i-tabler-folder'
118-
"
119-
/>
120-
{{ $t('media') }}
121-
</button>
115+
/>
116+
{{ $t('media') }}
117+
</button>
122118

123-
<button
124-
class="toolbar-button"
125-
:aria-expanded="editor.activeAssetBin === AssetBin.fonts"
126-
@click="
127-
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.fonts ? null : AssetBin.fonts)
119+
<button
120+
class="toolbar-button"
121+
:aria-expanded="editor.activeAssetBin === AssetBin.fonts"
122+
@click="
123+
() => (editor.activeAssetBin = editor.activeAssetBin === AssetBin.fonts ? null : AssetBin.fonts)
124+
"
125+
>
126+
<div
127+
:class="
128+
editor.activeAssetBin === AssetBin.fonts
129+
? 'icon i-tabler-file-typography-filled'
130+
: 'icon i-tabler-file-typography'
128131
"
129-
>
130-
<div
131-
:class="
132-
editor.activeAssetBin === AssetBin.fonts
133-
? 'icon i-tabler-file-typography-filled'
134-
: 'icon i-tabler-file-typography'
135-
"
136-
/>
137-
{{ $t('fonts') }}
138-
</button>
139-
</template>
132+
/>
133+
{{ $t('fonts') }}
134+
</button>
140135

141136
<button class="toolbar-button" @click="() => editor.export()">
142137
<div class="icon i-tabler-download" />

‎packages/shared/video/constants.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,3 @@ export const ReadyState = {
1212
export type ReadyState = (typeof ReadyState)[keyof typeof ReadyState]
1313

1414
export const ARROW_KEY_DELTA_S = 0.25
15-
16-
export const FEAT_ASSET_BIN = import.meta.env.DEV

‎packages/webgl-video-editor/src/components/timeline.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import '@interactjs/actions/drop'
22
import { effect, type MaybeChild, type MaybeRefOrGetter, ref, toValue } from 'fine-jsx'
33

4-
import type * as pub from '#core'
54
import type { InputEvent } from 'shared/types'
65
import { useI18n } from 'shared/utils'
76

@@ -44,13 +43,13 @@ export const Timeline = ({
4443
editor.seekTo(editor.pixelsToSeconds((lastScroll = scrollEl.scrollLeft)))
4544
}
4645

47-
const onInputClipFile = async (event: InputEvent, track: pub.Track | undefined) => {
46+
const onInputClipFile = async (event: InputEvent) => {
4847
const file = event.target.files?.[0]
4948
if (!file) return
5049

5150
try {
5251
const asset = await editor.createMediaAsset(file)
53-
editor.addClip(track ?? editor.getTrackForMedia(asset), asset)
52+
editor.addClip(editor.getTrackForMedia(asset), asset)
5453
} catch {
5554
// eslint-disable-next-line no-alert -- TODO
5655
alert(t('error_cannot_play_type'))
@@ -92,7 +91,7 @@ export const Timeline = ({
9291
type="file"
9392
class={styles.srOnly}
9493
accept={ACCEPT_VIDEO_FILE_TYPES}
95-
onInput={(event: InputEvent) => onInputClipFile(event, undefined)}
94+
onInput={(event: InputEvent) => onInputClipFile(event)}
9695
/>
9796
<span class={styles.textBody}>{t('click_add_clip')}</span>
9897
</label>
@@ -111,7 +110,7 @@ export const Timeline = ({
111110
dragTargetTrack.value?.id === track.id && dragTargetTrack.value.before && styles.active,
112111
]}
113112
/>
114-
<Track data-track-id={track.id} track={track} onInputClipFile={onInputClipFile} />
113+
<Track data-track-id={track.id} track={track} />
115114
</>
116115
))
117116
)

‎packages/webgl-video-editor/src/components/track.tsx‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,12 @@
1-
import { computed } from 'fine-jsx'
2-
3-
import { ACCEPT_VIDEO_FILE_TYPES } from '#constants'
41
import type * as pub from '#core'
5-
import type { InputEvent } from 'shared/types'
6-
import { useI18n } from 'shared/utils/index.js'
7-
import { FEAT_ASSET_BIN } from 'shared/video/constants.js'
82

93
import styles from '../css/index.module.css'
104

115
import { Clip } from './clip.jsx'
126
import { useEditor } from './utils.js'
137

14-
export const Track = ({
15-
track,
16-
onInputClipFile,
17-
...props
18-
}: {
19-
track: pub.Track
20-
onInputClipFile: (event: InputEvent, track?: pub.Track) => unknown
21-
[index: string]: unknown
22-
}): JSX.Element => {
8+
export const Track = ({ track, ...props }: { track: pub.Track; [index: string]: unknown }): JSX.Element => {
239
const editor = useEditor()
24-
const { t } = useI18n()
25-
const hasAnyClips = computed(() => editor.doc.timeline.children.some((track) => !!track.firstClip))
2610

2711
return (
2812
<div
@@ -35,36 +19,6 @@ export const Track = ({
3519
<Clip editor={editor} clip={clip} isSelected={() => editor.selection?.id === clip.id} />
3620
))
3721
}
38-
{() =>
39-
!FEAT_ASSET_BIN && (
40-
<label
41-
class={() => [styles.trackButton, track.clipCount > 0 && styles.square]}
42-
hidden={() => !hasAnyClips.value && track.index !== 0}
43-
>
44-
{() =>
45-
track.clipCount ? (
46-
<>
47-
<IconTablerPlus />
48-
<span class={styles.srOnly}>
49-
{track.trackType === 'audio' ? t('add_audio') : t('add_clip')}
50-
</span>
51-
</>
52-
) : (
53-
<>
54-
<IconTablerVideo />
55-
<span class={styles.textBody}>{() => t(`click_add_${track.trackType}`)}</span>
56-
</>
57-
)
58-
}
59-
<input
60-
type="file"
61-
class={styles.srOnly}
62-
accept={ACCEPT_VIDEO_FILE_TYPES}
63-
onInput={(event: InputEvent) => onInputClipFile(event, track)}
64-
/>
65-
</label>
66-
)
67-
}
6822
</div>
6923
)
7024
}

0 commit comments

Comments
 (0)