Skip to content

Commit

Permalink
Merge pull request #12 from cartesiancs/feat/locale
Browse files Browse the repository at this point in the history
Feat/locale
  • Loading branch information
DipokalLab authored Dec 19, 2024
2 parents b44b5f6 + 3e5ad6c commit 7f97ce0
Show file tree
Hide file tree
Showing 16 changed files with 323 additions and 57 deletions.
63 changes: 63 additions & 0 deletions app/src/controllers/locale.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ReactiveController, ReactiveControllerHost } from "lit";
import { rendererModal } from "../utils/modal";
import EnLang from "../locale/en.json";
import KoLang from "../locale/ko.json";
import { property, state } from "lit/decorators.js";

type AbleLanguage = "en" | "ko";

export class LocaleController implements ReactiveController {
host: ReactiveControllerHost;

value: AbleLanguage = "en";

constructor(host: ReactiveControllerHost) {
(this.host = host).addController(this);

window.electronAPI.req.store.get("LANG").then((item) => {
this.value = item.value;
});
}

public t(target) {
if (this.value == "en") {
return this.getValueByPath(EnLang, target);
}

if (this.value == "ko") {
return this.getValueByPath(KoLang, target);
}
}

public changeLanguage(lang: AbleLanguage) {
this.value = lang;
window.electronAPI.req.store.set("LANG", lang);
}

private getValueByPath(json, path) {
if (typeof path !== "string" || !path) {
return "";
}

const keys = path.split(".");
let current = json;

for (const key of keys) {
if (current && Object.prototype.hasOwnProperty.call(current, key)) {
current = current[key];
} else {
return "";
}
}

return current;
}

hostConnected() {
window.electronAPI.req.store.get("LANG").then((item) => {
this.value = item.value;
this.host.requestUpdate();
});
}
hostDisconnected() {}
}
36 changes: 7 additions & 29 deletions app/src/features/asset/assetBrowser.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { AssetController } from "../../controllers/asset";
import { LocaleController } from "../../controllers/locale";

@customElement("asset-browser")
export class AssetBrowser extends LitElement {
Expand All @@ -18,13 +19,12 @@ export class AssetBrowser extends LitElement {
private assetControl = new AssetController();

render() {
const template = this.template();
this.innerHTML = template;
}

template() {
return `<div class="d-flex flex-row p-0 mt-2">
<button ref="arrowup" class="btn btn-transparent btn-sm">
return html`<div class="d-flex flex-row p-0 mt-2">
<button
ref="arrowup"
class="btn btn-transparent btn-sm"
@click=${this.clickPrevDirectoryButton}
>
<span class="material-symbols-outlined icon-sm"> arrow_upward </span>
</button>
<input
Expand Down Expand Up @@ -58,26 +58,4 @@ export class AssetBrowser extends LitElement {

this.assetControl.requestAllDir(splitPrevDirectory.join("/"));
}

connectedCallback() {
this.render();

let prevDirectoryButton = this.querySelector("div").querySelector(
"button[ref='arrowup']",
);
prevDirectoryButton.addEventListener(
"click",
this.clickPrevDirectoryButton.bind(this),
);
}

disconnectedCallback() {
let prevDirectoryButton = this.querySelector("div").querySelector(
"button[ref='arrowup']",
);
prevDirectoryButton.removeEventListener(
"click",
this.clickPrevDirectoryButton,
);
}
}
26 changes: 17 additions & 9 deletions app/src/features/asset/assetList.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { path } from "../../functions/path";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { AssetController } from "../../controllers/asset";
import { LocaleController } from "../../controllers/locale";

@customElement("asset-list")
export class AssetList extends LitElement {
Expand All @@ -13,13 +14,24 @@ export class AssetList extends LitElement {
this.nowDirectory = "";
}

render() {
const template = this.template();
this.innerHTML = template;
private lc = new LocaleController(this);

createRenderRoot() {
return this;
}

template() {
return `<div class="row px-2"> <p class="text-light mt-2 text-center">프로젝트 폴더를 지정한 후 표시됩니다.</p> <button class="btn btn-sm btn-default text-light" onclick="NUGGET.directory.select()">프로젝트 폴더 지정</button> </div>`;
render() {
return html`<div class="row px-2">
<p class="text-light mt-2 text-center">
${this.lc.t("setting.need_select_project_folder")}
</p>
<button
class="btn btn-sm btn-default text-light"
onclick="NUGGET.directory.select()"
>
${this.lc.t("setting.select_project_folder")}
</button>
</div>`;
}

getFile(filename) {
Expand Down Expand Up @@ -55,10 +67,6 @@ export class AssetList extends LitElement {
clearList() {
this.querySelector("div").innerHTML = "";
}

connectedCallback() {
this.render();
}
}

@customElement("asset-file")
Expand Down
2 changes: 1 addition & 1 deletion app/src/features/asset/assetUploader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class AssetDropUploader extends LitElement {
return `
<div class="row justify-content-center align-items-start">
<b class="col-12 align-self-center text-light position-fixed text-center">
여기에 파일을 드롭해주세요
Drop File
</b>
</div>`;
}
Expand Down
7 changes: 6 additions & 1 deletion app/src/features/option/optionAudio.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { LocaleController } from "../../controllers/locale";

@customElement("option-audio")
export class OptionAudio extends LitElement {
Expand All @@ -11,8 +12,12 @@ export class OptionAudio extends LitElement {
this.elementId = "";
}

private lc = new LocaleController(this);

render() {
return html` <label class="form-label text-light">오디오</label>
return html` <label class="form-label text-light"
>${this.lc.t("setting.audio")}</label
>
<div class="d-flex flex-row bd-highlight mb-2"></div>`;
}

Expand Down
12 changes: 9 additions & 3 deletions app/src/features/option/optionImage.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ITimelineStore, useTimelineStore } from "../../states/timelineStore";
import { LocaleController } from "../../controllers/locale";

@customElement("option-image")
export class OptionImage extends LitElement {
elementId: string;
private lc = new LocaleController(this);

@property()
timelineState: ITimelineStore = useTimelineStore.getInitialState();
Expand All @@ -29,7 +31,9 @@ export class OptionImage extends LitElement {

render() {
return html`
<label class="form-label text-light">위치</label>
<label class="form-label text-light"
>${this.lc.t("setting.position")}</label
>
<div class="d-flex flex-row bd-highlight mb-2">
<input
aria-event="location-x"
Expand All @@ -47,7 +51,9 @@ export class OptionImage extends LitElement {
/>
</div>
<label class="form-label text-light">불투명도</label>
<label class="form-label text-light"
>${this.lc.t("setting.opacity")}</label
>
<div class="d-flex flex-row bd-highlight mb-2">
<input
aria-event="opacity"
Expand Down Expand Up @@ -85,7 +91,7 @@ export class OptionImage extends LitElement {

handleLocation() {
const targetElement = document.querySelector(
`element-control-asset[element-id='${this.elementId}']`
`element-control-asset[element-id='${this.elementId}']`,
);
const xDom: any = this.querySelector("input[aria-event='location-x'");
const yDom: any = this.querySelector("input[aria-event='location-y'");
Expand Down
9 changes: 7 additions & 2 deletions app/src/features/option/optionVideo.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ITimelineStore, useTimelineStore } from "../../states/timelineStore";
import { LocaleController } from "../../controllers/locale";

@customElement("option-video")
export class OptionVideo extends LitElement {
Expand All @@ -12,6 +13,8 @@ export class OptionVideo extends LitElement {
this.hide();
}

private lc = new LocaleController(this);

@property()
timelineState: ITimelineStore = useTimelineStore.getInitialState();

Expand All @@ -27,7 +30,9 @@ export class OptionVideo extends LitElement {
}

render() {
return html` <label class="form-label text-light">위치</label>
return html` <label class="form-label text-light"
>${this.lc.t("setting.position")}</label
>
<div class="d-flex flex-row bd-highlight mb-2">
<input
aria-event="location-x"
Expand Down Expand Up @@ -68,7 +73,7 @@ export class OptionVideo extends LitElement {

handleLocation() {
const targetElement = document.querySelector(
`element-control-asset[element-id='${this.elementId}']`
`element-control-asset[element-id='${this.elementId}']`,
);
const xDom: any = this.querySelector("input[aria-event='location-x'");
const yDom: any = this.querySelector("input[aria-event='location-y'");
Expand Down
32 changes: 32 additions & 0 deletions app/src/locale/en.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"test": "test",
"render": {
"start": "render start"
},
"setting": {
"select_project_folder": "Select Folder",
"video_duration": "Duration",
"seconds": "Seconds",
"seconds_unit": "s",
"frame": "Frame",
"resolution": "Resolution",
"save_project": "Save Project",
"load_project": "Load Project",
"bitrate": "Bitrate",
"bitrate_unit": "bitrate",
"export": "Export",
"need_select_project_folder": "Select a project folder",
"text": "text",
"position": "Position",
"opacity": "Opacity",
"audio": "Audio"
},
"modal": {
"change_language": "Change Language",
"change_language_description": "If you change the language, you will have to restart the app.",
"needs_to_restart": " Needs to Restart",
"needs_to_restart_description": "WARNING: You may lose unsaved tasks.",
"restart": "Restart",
"close": "Close"
}
}
32 changes: 32 additions & 0 deletions app/src/locale/ko.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"test": "테스트",
"render": {
"start": "랜더링 시작"
},
"setting": {
"select_project_folder": "프로젝트 폴더 지정",
"video_duration": "영상 길이",
"seconds": "초단위",
"seconds_unit": "",
"frame": "프레임",
"resolution": "해상도",
"save_project": "프로젝트 저장",
"load_project": "프로젝트 불러오기",
"bitrate": "비트레이트",
"bitrate_unit": "bitrate",
"export": "내보내기",
"need_select_project_folder": "프로젝트 폴더를 지정해주세요.",
"text": "텍스트",
"position": "위치",
"opacity": "불투명도",
"audio": "오디오"
},
"modal": {
"change_language": "언어 변경",
"change_language_description": "언어를 변경하시면 앱을 재시작해야 합니다.",
"needs_to_restart": "재시작 필요",
"needs_to_restart_description": "경고: 저장되지 않은 작업물은 사라질 수 있습니다. 프로젝트를 저장했는지 확인해주세요.",
"restart": "재시작",
"close": "닫기"
}
}
10 changes: 7 additions & 3 deletions app/src/ui/control/ControlRender.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import { customElement, property } from "lit/decorators.js";
import { IProjectStore, projectStore } from "../../states/projectStore";
import { ITimelineStore, useTimelineStore } from "../../states/timelineStore";
import { RenderController } from "../../controllers/render";
import { LocaleController } from "../../controllers/locale";

@customElement("control-ui-render")
export class ControlRender extends LitElement {
private renderControl = new RenderController();
private lc = new LocaleController(this);

@property()
projectState: IProjectStore = projectStore.getInitialState();
Expand All @@ -31,7 +33,9 @@ export class ControlRender extends LitElement {
}

render() {
return html` <label class="form-label text-light">비트레이트</label>
return html` <label class="form-label text-light"
>${this.lc.t("setting.bitrate")}</label
>
<div class="input-group mb-3">
<input
id="videoBitrate"
Expand All @@ -41,7 +45,7 @@ export class ControlRender extends LitElement {
value="5000"
/>
<span class="input-group-text bg-default text-light" id="basic-addon2"
>bitrate</span
>${this.lc.t("setting.bitrate_unit")}</span
>
</div>
Expand Down Expand Up @@ -72,7 +76,7 @@ export class ControlRender extends LitElement {
</div> -->
<button class="btn btn-blue-fill" @click=${this.handleClickRenderButton}>
Export
${this.lc.t("setting.export")}
</button>`;
}
}
Loading

0 comments on commit 7f97ce0

Please sign in to comment.