Skip to content

Commit

Permalink
add: video editor page header
Browse files Browse the repository at this point in the history
  • Loading branch information
@zenkyuv
zenkyuv committed Dec 19, 2024
1 parent 9334e21 commit d2fda8f
Show file tree
Hide file tree
Showing 5 changed files with 228 additions and 91 deletions.
141 changes: 80 additions & 61 deletions s/components/omni-timeline/views/export/view.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Op, html, watch} from "@benev/slate"
import {Op, html, watch, css} from "@benev/slate"

import {styles} from "./styles.js"
import {shadow_view} from "../../../../context/context.js"
Expand All @@ -11,9 +11,8 @@ export const Export = shadow_view(use => () => {
use.styles(styles)
use.watch(() => use.context.state)

const compositor = use.context.controllers.compositor
const video_export = use.context.controllers.video_export
const state = use.context.state
const video_export = use.context.controllers.video_export
const [logs, setLogs, getLogs] = use.state<string[]>([])

use.mount(() => {
Expand All @@ -27,11 +26,6 @@ export const Export = shadow_view(use => () => {
return () => dispose()
})

const dialog = use.defer(() => use.shadow.querySelector("dialog"))
if(use.context.state.is_exporting) {
dialog?.showModal()
}

const renderAspectRatio = () => {
const aspectRatio = state.settings.aspectRatio
return html`
Expand Down Expand Up @@ -64,59 +58,6 @@ export const Export = shadow_view(use => () => {
use.context.helpers.ffmpeg.is_loading.value,
use.context.is_webcodecs_supported.value), () => html`
<div class="flex">
<dialog @cancel=${(e: Event) => e.preventDefault()}>
<div class="box">
${state.is_exporting
? html`
${compositor.canvas.getElement()}
`
: null}
<div class=progress>
<div class=stats>
<span class=percentage>
Progress ${state.export_status === "complete" || state.export_status === "flushing"
? "100"
: state.export_progress.toFixed(2)}
%
</span>
<span class=status>Status: ${state.export_status}</span>
</div>
<div class=progress-bar>
<div
class="bar"
style="
width: ${state.export_status === "complete" || state.export_status === "flushing"
? "100"
: state.export_progress.toFixed(2)
}%"
>
</div>
</div>
<div class=buttons>
<button
@click=${() => {
dialog?.close()
video_export.resetExporter(use.context.state)
}}
class="cancel"
?data-complete=${state.export_status === "complete"}
>
${state.export_status === "complete" ? "Continue editing" : "Cancel Export"}
</button>
<button
@click=${() => video_export.save_file()}
class="sparkle-button save-button"
.disabled=${state.export_status !== "complete"}
>
<span class="spark"></span>
<span class="backdrop"></span>
${saveSvg}
<span class=text>save</span>
</button>
</div>
</div>
</div>
</dialog>
<div class=export>
<h2>Export</h2>
<p>${circleInfoSvg} Your video will export with the following settings:</p>
Expand All @@ -142,3 +83,81 @@ export const Export = shadow_view(use => () => {
</div>
`)
})

export const ExportInProgressModal = shadow_view(use => () => {
use.styles([styles, css`
:host {
display: block;
width: auto;
height: auto;
overflow: auto;
font-family: sans-serif;
}`
])
use.watch(() => use.context.state)

const state = use.context.state
const compositor = use.context.controllers.compositor
const video_export = use.context.controllers.video_export

const dialog = use.defer(() => use.shadow.querySelector("dialog"))
if(use.context.state.is_exporting) {
dialog?.showModal()
}

return html`
<dialog @cancel=${(e: Event) => e.preventDefault()}>
<div class="box">
${state.is_exporting
? html`
${compositor.canvas.getElement()}
`
: null}
<div class=progress>
<div class=stats>
<span class=percentage>
Progress ${state.export_status === "complete" || state.export_status === "flushing"
? "100"
: state.export_progress.toFixed(2)}
%
</span>
<span class=status>Status: ${state.export_status}</span>
</div>
<div class=progress-bar>
<div
class="bar"
style="
width: ${state.export_status === "complete" || state.export_status === "flushing"
? "100"
: state.export_progress.toFixed(2)
}%"
>
</div>
</div>
<div class=buttons>
<button
@click=${() => {
dialog?.close()
video_export.resetExporter(use.context.state)
}}
class="cancel"
?data-complete=${state.export_status === "complete"}
>
${state.export_status === "complete" ? "Continue editing" : "Cancel Export"}
</button>
<button
@click=${() => video_export.save_file()}
class="sparkle-button save-button"
.disabled=${state.export_status !== "complete"}
>
<span class="spark"></span>
<span class="backdrop"></span>
${saveSvg}
<span class=text>save</span>
</button>
</div>
</div>
</div>
</dialog>
`
})
21 changes: 0 additions & 21 deletions s/components/omni-timeline/views/media-player/view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@ import {Op, html, watch} from "@benev/slate"
import {styles} from "./styles.js"
import {shadow_view} from "../../../../context/context.js"
import playSvg from "../../../../icons/gravity-ui/play.svg.js"
import checkSvg from "../../../../icons/gravity-ui/check.svg.js"
import pauseSvg from "../../../../icons/gravity-ui/pause.svg.js"
import {TextUpdater} from "../../../../views/text-updater/view.js"
import {StateHandler} from "../../../../views/state-handler/view.js"
import fullscreenSvg from "../../../../icons/gravity-ui/fullscreen.svg.js"
import pencilSquareSvg from "../../../../icons/gravity-ui/pencil-square.svg.js"

export const MediaPlayer = shadow_view(use => () => {
use.styles(styles)
Expand Down Expand Up @@ -59,29 +57,10 @@ export const MediaPlayer = shadow_view(use => () => {
}
}

const [renameDisabled, setRenameDisabled] = use.state(true)
const toggleProjectRename = (e: PointerEvent) => {
e.preventDefault()
setRenameDisabled(!renameDisabled)
}

const confirmProjectRename = () => {
const projectName = use.shadow.querySelector(".input-name") as HTMLInputElement
use.context.actions.set_project_name(projectName.value)
}

return StateHandler(Op.all(
use.context.helpers.ffmpeg.is_loading.value,
use.context.is_webcodecs_supported.value), () => html`
<div class="flex">
<div class="project-name">
<span class="box">
<input class="input-name" ?disabled=${renameDisabled} .value=${use.context.state.projectName}>
<span class="icons" @click=${toggleProjectRename}>
${renameDisabled ? html`${pencilSquareSvg}` : html`<span @click=${confirmProjectRename} class="check">${checkSvg}</span>`}
</span>
</span>
</div>
<figure>
<div class="canvas-container" style="aspect-ratio: ${state.settings.width}/${state.settings.height};">
${use.context.state.selected_effect?.kind === "text" && compositor.canvas.getActiveObject()
Expand Down
97 changes: 94 additions & 3 deletions s/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,96 @@
box-sizing: border-box;
}


/*Video editor surface styles*/
.editor {
padding: 0.5em;
height: 100vh;
}

.editor-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.3em 0.3em 0.3em;
flex-wrap: wrap;
gap: 0.5em;

& .logo {
width: 70px;
}

& .flex {
display: flex;
align-items: center;
gap: 1em;
}
}

.project-name {
display: flex;
align-items: center;
justify-content: center;

& .box {
display: flex;
align-items: center;
border: 1px solid;
padding: 0.2em;
border-radius: 5px;

& .icons {
display: flex;
cursor: pointer;

& .check {
display: flex;
color: green;
}
}

& input {
background: none;
border: none;
color: gray;

&:not(:disabled) {
color: white;
}
}

}
}

.export {
display: flex;
align-items: center;
gap: 1em;
}

.export-button {
color: white;
background: #1d1c1c;
cursor: pointer;
border-radius: 5px;
padding: 0 0.3em;
border: 1px solid white;

& .text {
display: flex;
gap: 0.3em;
font-family: Poppins-Regular;

& svg {
position: relative;
top: 1px;
width: 14px;
}
}
}
/*Video editor surface styles end*/

/*Global styles*/
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
Expand All @@ -19,16 +109,17 @@ html, body {
min-height: 100%;

color: gray;
background: #1b1b22;
background: black;
}

body {
overflow-x: hidden;
}

construct-editor {
width: 100vw;
height: 100vh;
width: 100%;
height: calc(100% - 25px);
border-radius: 10px;

--alpha: yellow;
--bravo: lime;
Expand Down
2 changes: 1 addition & 1 deletion s/index.html.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default template(async basic => {
return easypage({
path,
css: "index.css",
title: "omni-clip",
title: "omniclip",
head: html`
<script src="coi-serviceworker.js"></script>
<meta charset="UTF-8">
Expand Down
Loading

0 comments on commit d2fda8f

Please sign in to comment.