mirror of
https://github.com/zadam/trilium.git
synced 2026-03-12 23:20:26 +01:00
Compare commits
34 Commits
autocomple
...
renovate/h
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cafcdf838f | ||
|
|
caa428c1a2 | ||
|
|
517c721664 | ||
|
|
a8cdaa69f7 | ||
|
|
53d221ef34 | ||
|
|
5450fde472 | ||
|
|
808446cef5 | ||
|
|
921c663199 | ||
|
|
1b8a75b615 | ||
|
|
f78ced5bc3 | ||
|
|
81bf5f4f3b | ||
|
|
aaed368670 | ||
|
|
5e8de14721 | ||
|
|
634ab5b5c0 | ||
|
|
906889a035 | ||
|
|
ab9d50b905 | ||
|
|
e61b7c7cfc | ||
|
|
1c628fba4c | ||
|
|
f8b4c6cb15 | ||
|
|
3edd8f6c5a | ||
|
|
7777f72893 | ||
|
|
9af85b767b | ||
|
|
73260b91eb | ||
|
|
2858f63873 | ||
|
|
15ca328727 | ||
|
|
5b3fbecc0f | ||
|
|
365d0f0aac | ||
|
|
e86d84c463 | ||
|
|
6b974c2ac7 | ||
|
|
d2afcbb98d | ||
|
|
68a122fcf5 | ||
|
|
92f0144b48 | ||
|
|
a5a345728c | ||
|
|
23890e64e9 |
@@ -803,12 +803,13 @@
|
|||||||
"web-view": "عرض الويب",
|
"web-view": "عرض الويب",
|
||||||
"mind-map": "خريطة ذهنية",
|
"mind-map": "خريطة ذهنية",
|
||||||
"geo-map": "خريطة جغرافية",
|
"geo-map": "خريطة جغرافية",
|
||||||
"task-list": "قائمة المهام"
|
"task-list": "قائمة المهام",
|
||||||
|
"spreadsheet": "جدول البيانات"
|
||||||
},
|
},
|
||||||
"shared_switch": {
|
"shared_switch": {
|
||||||
"shared": "مشترك",
|
"shared": "مشترك",
|
||||||
"toggle-on-title": "مشاركة الملاحظة",
|
"toggle-on-title": "مشاركة الملاحظة",
|
||||||
"toggle-off-title": "الغاء مشاركة الملاحظة"
|
"toggle-off-title": "إلغاء مشاركة الملاحظة"
|
||||||
},
|
},
|
||||||
"template_switch": {
|
"template_switch": {
|
||||||
"template": "قالب"
|
"template": "قالب"
|
||||||
@@ -1286,8 +1287,10 @@
|
|||||||
"search-for": "بحث ل \"{{term}}\""
|
"search-for": "بحث ل \"{{term}}\""
|
||||||
},
|
},
|
||||||
"protect_note": {
|
"protect_note": {
|
||||||
"toggle-off": "ازالة الحماية عن الملاحظة",
|
"toggle-off": "إزالة الحماية عن الملاحظة",
|
||||||
"toggle-on": "حماية الملاحظة"
|
"toggle-on": "حماية الملاحظة",
|
||||||
|
"toggle-on-hint": "الملاحظة غير محمة، انقر لحمايتها",
|
||||||
|
"toggle-off-hint": "الملاحظة محمية، انقر لإزالة الحماية منها"
|
||||||
},
|
},
|
||||||
"open-help-page": "فتح صفحة المساعدة",
|
"open-help-page": "فتح صفحة المساعدة",
|
||||||
"empty": {
|
"empty": {
|
||||||
|
|||||||
@@ -1036,7 +1036,7 @@
|
|||||||
"file_preview_not_available": "File preview is not available for this file format.",
|
"file_preview_not_available": "File preview is not available for this file format.",
|
||||||
"too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
|
"too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
|
||||||
},
|
},
|
||||||
"video": {
|
"media": {
|
||||||
"play": "Play (Space)",
|
"play": "Play (Space)",
|
||||||
"pause": "Pause (Space)",
|
"pause": "Pause (Space)",
|
||||||
"back-10s": "Back 10s (Left arrow key)",
|
"back-10s": "Back 10s (Left arrow key)",
|
||||||
@@ -1051,7 +1051,7 @@
|
|||||||
"exit-picture-in-picture": "Exit picture-in-picture",
|
"exit-picture-in-picture": "Exit picture-in-picture",
|
||||||
"fullscreen": "Fullscreen (F)",
|
"fullscreen": "Fullscreen (F)",
|
||||||
"exit-fullscreen": "Exit fullscreen",
|
"exit-fullscreen": "Exit fullscreen",
|
||||||
"unsupported-format": "Video preview is not available for this file format.",
|
"unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
|
||||||
"zoom-to-fit": "Zoom to fill",
|
"zoom-to-fit": "Zoom to fill",
|
||||||
"zoom-reset": "Reset zoom to fill"
|
"zoom-reset": "Reset zoom to fill"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1780,7 +1780,8 @@
|
|||||||
"ai-chat": "Czat AI",
|
"ai-chat": "Czat AI",
|
||||||
"task-list": "Lista zadań",
|
"task-list": "Lista zadań",
|
||||||
"new-feature": "Nowość",
|
"new-feature": "Nowość",
|
||||||
"collections": "Kolekcje"
|
"collections": "Kolekcje",
|
||||||
|
"spreadsheet": "Arkusz"
|
||||||
},
|
},
|
||||||
"protect_note": {
|
"protect_note": {
|
||||||
"toggle-on": "Chroń notatkę",
|
"toggle-on": "Chroń notatkę",
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
|
if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/") || note.mime.startsWith("audio/"))) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -108,7 +108,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
|
if (note.type === "file" && (MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime) || note.mime.startsWith("audio/"))) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
color: var(--muted-text-color);
|
color: var(--muted-text-color);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
white-space: pre-line;
|
||||||
|
|
||||||
.tn-icon {
|
.tn-icon {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import "./File.css";
|
import "./File.css";
|
||||||
|
|
||||||
import FNote from "../../entities/fnote";
|
|
||||||
import { t } from "../../services/i18n";
|
import { t } from "../../services/i18n";
|
||||||
import { getUrlForDownload } from "../../services/open";
|
|
||||||
import Alert from "../react/Alert";
|
import Alert from "../react/Alert";
|
||||||
import { useNoteBlob } from "../react/hooks";
|
import { useNoteBlob } from "../react/hooks";
|
||||||
|
import AudioPreview from "./file/Audio";
|
||||||
import PdfPreview from "./file/Pdf";
|
import PdfPreview from "./file/Pdf";
|
||||||
import VideoPreview from "./file/Video";
|
import VideoPreview from "./file/Video";
|
||||||
import { TypeWidgetProps } from "./type_widget";
|
import { TypeWidgetProps } from "./type_widget";
|
||||||
@@ -43,16 +42,6 @@ function TextPreview({ content }: { content: string }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AudioPreview({ note }: { note: FNote }) {
|
|
||||||
return (
|
|
||||||
<audio
|
|
||||||
class="audio-preview"
|
|
||||||
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
|
|
||||||
controls
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NoPreview() {
|
function NoPreview() {
|
||||||
return (
|
return (
|
||||||
<Alert className="file-preview-not-available" type="info">
|
<Alert className="file-preview-not-available" type="info">
|
||||||
|
|||||||
112
apps/client/src/widgets/type_widgets/file/Audio.tsx
Normal file
112
apps/client/src/widgets/type_widgets/file/Audio.tsx
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
|
||||||
|
|
||||||
|
import FNote from "../../../entities/fnote";
|
||||||
|
import { t } from "../../../services/i18n";
|
||||||
|
import { getUrlForDownload } from "../../../services/open";
|
||||||
|
import Icon from "../../react/Icon";
|
||||||
|
import NoItems from "../../react/NoItems";
|
||||||
|
import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
|
||||||
|
|
||||||
|
export default function AudioPreview({ note }: { note: FNote }) {
|
||||||
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||||
|
const audioRef = useRef<HTMLAudioElement>(null);
|
||||||
|
const [playing, setPlaying] = useState(false);
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
const togglePlayback = useCallback(() => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (!audio) return;
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.play();
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
const onKeyDown = useKeyboardShortcuts(audioRef, togglePlayback);
|
||||||
|
|
||||||
|
useEffect(() => setError(false), [note.noteId]);
|
||||||
|
const onError = useCallback(() => setError(true), []);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <NoItems icon="bx bx-volume-mute" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={wrapperRef} className="audio-preview-wrapper" onKeyDown={onKeyDown} tabIndex={0}>
|
||||||
|
<audio
|
||||||
|
class="audio-preview"
|
||||||
|
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
|
||||||
|
ref={audioRef}
|
||||||
|
onPlay={() => setPlaying(true)}
|
||||||
|
onPause={() => setPlaying(false)}
|
||||||
|
onError={onError}
|
||||||
|
/>
|
||||||
|
<div className="audio-preview-icon-wrapper">
|
||||||
|
<Icon icon="bx bx-music" className="audio-preview-icon" />
|
||||||
|
</div>
|
||||||
|
<div className="media-preview-controls">
|
||||||
|
<SeekBar mediaRef={audioRef} />
|
||||||
|
|
||||||
|
<div class="media-buttons-row">
|
||||||
|
<div className="left">
|
||||||
|
<PlaybackSpeed mediaRef={audioRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="center">
|
||||||
|
<div className="spacer" />
|
||||||
|
<SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
|
||||||
|
<PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
|
||||||
|
<SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
|
||||||
|
<LoopButton mediaRef={audioRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="right">
|
||||||
|
<VolumeControl mediaRef={audioRef} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, togglePlayback: () => void) {
|
||||||
|
return useCallback((e: KeyboardEvent) => {
|
||||||
|
const audio = audioRef.current;
|
||||||
|
if (!audio) return;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case " ":
|
||||||
|
e.preventDefault();
|
||||||
|
togglePlayback();
|
||||||
|
break;
|
||||||
|
case "ArrowLeft":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.currentTime = Math.max(0, audio.currentTime - (e.ctrlKey ? 60 : 10));
|
||||||
|
break;
|
||||||
|
case "ArrowRight":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.currentTime = Math.min(audio.duration, audio.currentTime + (e.ctrlKey ? 60 : 10));
|
||||||
|
break;
|
||||||
|
case "m":
|
||||||
|
case "M":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.muted = !audio.muted;
|
||||||
|
break;
|
||||||
|
case "ArrowUp":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.volume = Math.min(1, audio.volume + 0.05);
|
||||||
|
break;
|
||||||
|
case "ArrowDown":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.volume = Math.max(0, audio.volume - 0.05);
|
||||||
|
break;
|
||||||
|
case "Home":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.currentTime = 0;
|
||||||
|
break;
|
||||||
|
case "End":
|
||||||
|
e.preventDefault();
|
||||||
|
audio.currentTime = audio.duration;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, [ audioRef, togglePlayback ]);
|
||||||
|
}
|
||||||
98
apps/client/src/widgets/type_widgets/file/MediaPlayer.css
Normal file
98
apps/client/src/widgets/type_widgets/file/MediaPlayer.css
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
.media-preview-controls {
|
||||||
|
padding: 1.25em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
.media-buttons-row {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
width: var(--icon-button-size, 32px);
|
||||||
|
height: var(--icon-button-size, 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button {
|
||||||
|
--icon-button-size: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-seekbar-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
.media-time {
|
||||||
|
font-size: 0.85em;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-trackbar {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-volume-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
|
||||||
|
.media-volume-slider {
|
||||||
|
width: 80px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-dropdown {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tn-icon {
|
||||||
|
transform: translateY(-10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-speed-label {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(15%);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-preview-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.audio-preview-icon-wrapper {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 8em;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
220
apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
Normal file
220
apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import "./MediaPlayer.css";
|
||||||
|
|
||||||
|
import { RefObject } from "preact";
|
||||||
|
import { useEffect, useState } from "preact/hooks";
|
||||||
|
|
||||||
|
import { t } from "../../../services/i18n";
|
||||||
|
import ActionButton from "../../react/ActionButton";
|
||||||
|
import Dropdown from "../../react/Dropdown";
|
||||||
|
import Icon from "../../react/Icon";
|
||||||
|
|
||||||
|
export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
|
||||||
|
const [currentTime, setCurrentTime] = useState(0);
|
||||||
|
const [duration, setDuration] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
|
||||||
|
const onTimeUpdate = () => setCurrentTime(media.currentTime);
|
||||||
|
const onDurationChange = () => setDuration(media.duration);
|
||||||
|
|
||||||
|
media.addEventListener("timeupdate", onTimeUpdate);
|
||||||
|
media.addEventListener("durationchange", onDurationChange);
|
||||||
|
return () => {
|
||||||
|
media.removeEventListener("timeupdate", onTimeUpdate);
|
||||||
|
media.removeEventListener("durationchange", onDurationChange);
|
||||||
|
};
|
||||||
|
}, [ mediaRef ]);
|
||||||
|
|
||||||
|
const onSeek = (e: Event) => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
media.currentTime = parseFloat((e.target as HTMLInputElement).value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="media-seekbar-row">
|
||||||
|
<span class="media-time">{formatTime(currentTime)}</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
class="media-trackbar"
|
||||||
|
min={0}
|
||||||
|
max={duration || 0}
|
||||||
|
step={0.1}
|
||||||
|
value={currentTime}
|
||||||
|
onInput={onSeek}
|
||||||
|
/>
|
||||||
|
<span class="media-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(seconds: number): string {
|
||||||
|
const mins = Math.floor(seconds / 60);
|
||||||
|
const secs = Math.floor(seconds % 60);
|
||||||
|
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PlayPauseButton({ playing, togglePlayback }: {
|
||||||
|
playing: boolean,
|
||||||
|
togglePlayback: () => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<ActionButton
|
||||||
|
className="play-button"
|
||||||
|
icon={playing ? "bx bx-pause" : "bx bx-play"}
|
||||||
|
text={playing ? t("media.pause") : t("media.play")}
|
||||||
|
onClick={togglePlayback}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
|
||||||
|
const [volume, setVolume] = useState(() => mediaRef.current?.volume ?? 1);
|
||||||
|
const [muted, setMuted] = useState(() => mediaRef.current?.muted ?? false);
|
||||||
|
|
||||||
|
// Sync state when the media element changes volume externally.
|
||||||
|
useEffect(() => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
|
||||||
|
setVolume(media.volume);
|
||||||
|
setMuted(media.muted);
|
||||||
|
|
||||||
|
const onVolumeChange = () => {
|
||||||
|
setVolume(media.volume);
|
||||||
|
setMuted(media.muted);
|
||||||
|
};
|
||||||
|
media.addEventListener("volumechange", onVolumeChange);
|
||||||
|
return () => media.removeEventListener("volumechange", onVolumeChange);
|
||||||
|
}, [ mediaRef ]);
|
||||||
|
|
||||||
|
const onVolumeChange = (e: Event) => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
const val = parseFloat((e.target as HTMLInputElement).value);
|
||||||
|
media.volume = val;
|
||||||
|
setVolume(val);
|
||||||
|
if (val > 0 && media.muted) {
|
||||||
|
media.muted = false;
|
||||||
|
setMuted(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMute = () => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
media.muted = !media.muted;
|
||||||
|
setMuted(media.muted);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="media-volume-row">
|
||||||
|
<ActionButton
|
||||||
|
icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
|
||||||
|
text={muted ? t("media.unmute") : t("media.mute")}
|
||||||
|
onClick={toggleMute}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
class="media-volume-slider"
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.05}
|
||||||
|
value={muted ? 0 : volume}
|
||||||
|
onInput={onVolumeChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SkipButton({ mediaRef, seconds, icon, text }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, seconds: number, icon: string, text: string }) {
|
||||||
|
const skip = () => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
media.currentTime = Math.max(0, Math.min(media.duration, media.currentTime + seconds));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ActionButton icon={icon} text={text} onClick={skip} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
|
||||||
|
const [loop, setLoop] = useState(() => mediaRef.current?.loop ?? false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
setLoop(media.loop);
|
||||||
|
|
||||||
|
const observer = new MutationObserver(() => setLoop(media.loop));
|
||||||
|
observer.observe(media, { attributes: true, attributeFilter: ["loop"] });
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [ mediaRef ]);
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
media.loop = !media.loop;
|
||||||
|
setLoop(media.loop);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ActionButton
|
||||||
|
className={loop ? "active" : ""}
|
||||||
|
icon="bx bx-repeat"
|
||||||
|
text={loop ? t("media.disable-loop") : t("media.loop")}
|
||||||
|
onClick={toggle}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
|
||||||
|
|
||||||
|
export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
|
||||||
|
const [speed, setSpeed] = useState(() => mediaRef.current?.playbackRate ?? 1);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
|
||||||
|
setSpeed(media.playbackRate);
|
||||||
|
|
||||||
|
const onRateChange = () => setSpeed(media.playbackRate);
|
||||||
|
media.addEventListener("ratechange", onRateChange);
|
||||||
|
return () => media.removeEventListener("ratechange", onRateChange);
|
||||||
|
}, [ mediaRef ]);
|
||||||
|
|
||||||
|
const selectSpeed = (rate: number) => {
|
||||||
|
const media = mediaRef.current;
|
||||||
|
if (!media) return;
|
||||||
|
media.playbackRate = rate;
|
||||||
|
setSpeed(rate);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
iconAction
|
||||||
|
hideToggleArrow
|
||||||
|
buttonClassName="speed-dropdown"
|
||||||
|
text={<>
|
||||||
|
<Icon icon="bx bx-tachometer" />
|
||||||
|
<span class="media-speed-label">{speed}x</span>
|
||||||
|
</>}
|
||||||
|
title={t("media.playback-speed")}
|
||||||
|
>
|
||||||
|
{PLAYBACK_SPEEDS.map((rate) => (
|
||||||
|
<li key={rate}>
|
||||||
|
<button
|
||||||
|
class={`dropdown-item ${rate === speed ? "active" : ""}`}
|
||||||
|
onClick={() => selectSpeed(rate)}
|
||||||
|
>
|
||||||
|
{rate}x
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -13,102 +13,23 @@
|
|||||||
&.controls-hidden {
|
&.controls-hidden {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.video-preview-controls {
|
.media-preview-controls {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-preview-controls {
|
.media-preview-controls {
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 1.25em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5em;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
color: white;
|
|
||||||
--icon-button-hover-color: white;
|
--icon-button-hover-color: white;
|
||||||
--icon-button-hover-background: rgba(255, 255, 255, 0.2);
|
--icon-button-hover-background: rgba(255, 255, 255, 0.2);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 300ms ease;
|
transition: opacity 300ms ease;
|
||||||
|
|
||||||
.video-buttons-row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5em;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
width: var(--icon-button-size, 32px);
|
|
||||||
height: var(--icon-button-size, 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-button {
|
|
||||||
--icon-button-size: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-seekbar-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-trackbar {
|
|
||||||
flex: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-time {
|
|
||||||
font-size: 0.85em;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-volume-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-volume-slider {
|
|
||||||
width: 80px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speed-dropdown {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.tn-icon {
|
|
||||||
transform: translateY(-10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-speed-label {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
transform: translateY(15%);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
text-align: center;
|
backdrop-filter: blur(6px);
|
||||||
font-size: 0.6rem;
|
color: white;
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,21 +1,14 @@
|
|||||||
import "./Video.css";
|
import "./Video.css";
|
||||||
|
|
||||||
import { RefObject } from "preact";
|
import { RefObject } from "preact";
|
||||||
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
|
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
|
||||||
|
|
||||||
import FNote from "../../../entities/fnote";
|
import FNote from "../../../entities/fnote";
|
||||||
import { t } from "../../../services/i18n";
|
import { t } from "../../../services/i18n";
|
||||||
import { getUrlForDownload } from "../../../services/open";
|
import { getUrlForDownload } from "../../../services/open";
|
||||||
import ActionButton from "../../react/ActionButton";
|
import ActionButton from "../../react/ActionButton";
|
||||||
import Dropdown from "../../react/Dropdown";
|
|
||||||
import Icon from "../../react/Icon";
|
|
||||||
import NoItems from "../../react/NoItems";
|
import NoItems from "../../react/NoItems";
|
||||||
|
import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
|
||||||
function formatTime(seconds: number): string {
|
|
||||||
const mins = Math.floor(seconds / 60);
|
|
||||||
const secs = Math.floor(seconds % 60);
|
|
||||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AUTO_HIDE_DELAY = 3000;
|
const AUTO_HIDE_DELAY = 3000;
|
||||||
|
|
||||||
@@ -40,11 +33,56 @@ export default function VideoPreview({ note }: { note: FNote }) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onVideoClick = useCallback((e: MouseEvent) => {
|
const onVideoClick = useCallback((e: MouseEvent) => {
|
||||||
if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
|
if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
|
||||||
togglePlayback();
|
togglePlayback();
|
||||||
}, [togglePlayback]);
|
}, [togglePlayback]);
|
||||||
|
|
||||||
const onKeyDown = useCallback((e: KeyboardEvent) => {
|
const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
class="video-preview"
|
||||||
|
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
|
||||||
|
datatype={note?.mime}
|
||||||
|
onPlay={() => setPlaying(true)}
|
||||||
|
onPause={() => setPlaying(false)}
|
||||||
|
onError={onError}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="media-preview-controls">
|
||||||
|
<SeekBar mediaRef={videoRef} />
|
||||||
|
<div class="media-buttons-row">
|
||||||
|
<div className="left">
|
||||||
|
<PlaybackSpeed mediaRef={videoRef} />
|
||||||
|
<RotateButton videoRef={videoRef} />
|
||||||
|
</div>
|
||||||
|
<div className="center">
|
||||||
|
<div className="spacer" />
|
||||||
|
<SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
|
||||||
|
<PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
|
||||||
|
<SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
|
||||||
|
<LoopButton mediaRef={videoRef} />
|
||||||
|
</div>
|
||||||
|
<div className="right">
|
||||||
|
<VolumeControl mediaRef={videoRef} />
|
||||||
|
<ZoomToFitButton videoRef={videoRef} />
|
||||||
|
<PictureInPictureButton videoRef={videoRef} />
|
||||||
|
<FullscreenButton targetRef={wrapperRef} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function useKeyboardShortcuts(videoRef: MutableRef<HTMLVideoElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void, flashControls: () => void) {
|
||||||
|
return useCallback((e: KeyboardEvent) => {
|
||||||
const video = videoRef.current;
|
const video = videoRef.current;
|
||||||
if (!video) return;
|
if (!video) return;
|
||||||
|
|
||||||
@@ -100,48 +138,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
|
|||||||
flashControls();
|
flashControls();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}, [togglePlayback, flashControls]);
|
}, [ wrapperRef, videoRef, togglePlayback, flashControls ]);
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
|
|
||||||
<video
|
|
||||||
ref={videoRef}
|
|
||||||
class="video-preview"
|
|
||||||
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
|
|
||||||
datatype={note?.mime}
|
|
||||||
onPlay={() => setPlaying(true)}
|
|
||||||
onPause={() => setPlaying(false)}
|
|
||||||
onError={onError}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="video-preview-controls">
|
|
||||||
<SeekBar videoRef={videoRef} />
|
|
||||||
<div class="video-buttons-row">
|
|
||||||
<div className="left">
|
|
||||||
<PlaybackSpeed videoRef={videoRef} />
|
|
||||||
<RotateButton videoRef={videoRef} />
|
|
||||||
</div>
|
|
||||||
<div className="center">
|
|
||||||
<div className="spacer" />
|
|
||||||
<SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
|
|
||||||
<PlayPauseButton videoRef={videoRef} playing={playing} />
|
|
||||||
<SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
|
|
||||||
<LoopButton videoRef={videoRef} />
|
|
||||||
</div>
|
|
||||||
<div className="right">
|
|
||||||
<VolumeControl videoRef={videoRef} />
|
|
||||||
<ZoomToFitButton videoRef={videoRef} />
|
|
||||||
<PictureInPictureButton videoRef={videoRef} />
|
|
||||||
<FullscreenButton targetRef={wrapperRef} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
|
function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
|
||||||
@@ -153,7 +150,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
|
|||||||
if (videoRef.current && !videoRef.current.paused) {
|
if (videoRef.current && !videoRef.current.paused) {
|
||||||
hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
|
hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
|
||||||
}
|
}
|
||||||
}, []);
|
}, [ videoRef]);
|
||||||
|
|
||||||
const onMouseMove = useCallback(() => {
|
const onMouseMove = useCallback(() => {
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
@@ -174,219 +171,6 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
|
|||||||
return { visible, onMouseMove, flash: onMouseMove };
|
return { visible, onMouseMove, flash: onMouseMove };
|
||||||
}
|
}
|
||||||
|
|
||||||
function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {
|
|
||||||
const togglePlayback = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
if (video.paused) {
|
|
||||||
video.play();
|
|
||||||
} else {
|
|
||||||
video.pause();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ActionButton
|
|
||||||
className="play-button"
|
|
||||||
icon={playing ? "bx bx-pause" : "bx bx-play"}
|
|
||||||
text={playing ? t("video.pause") : t("video.play")}
|
|
||||||
onClick={togglePlayback}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTMLVideoElement>, seconds: number, icon: string, text: string }) {
|
|
||||||
const skip = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ActionButton icon={icon} text={text} onClick={skip} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
|
||||||
const [currentTime, setCurrentTime] = useState(0);
|
|
||||||
const [duration, setDuration] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
const onTimeUpdate = () => setCurrentTime(video.currentTime);
|
|
||||||
const onDurationChange = () => setDuration(video.duration);
|
|
||||||
|
|
||||||
video.addEventListener("timeupdate", onTimeUpdate);
|
|
||||||
video.addEventListener("durationchange", onDurationChange);
|
|
||||||
return () => {
|
|
||||||
video.removeEventListener("timeupdate", onTimeUpdate);
|
|
||||||
video.removeEventListener("durationchange", onDurationChange);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onSeek = (e: Event) => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
video.currentTime = parseFloat((e.target as HTMLInputElement).value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="video-seekbar-row">
|
|
||||||
<span class="video-time">{formatTime(currentTime)}</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
class="video-trackbar"
|
|
||||||
min={0}
|
|
||||||
max={duration || 0}
|
|
||||||
step={0.1}
|
|
||||||
value={currentTime}
|
|
||||||
onInput={onSeek}
|
|
||||||
/>
|
|
||||||
<span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
|
||||||
const [volume, setVolume] = useState(() => videoRef.current?.volume ?? 1);
|
|
||||||
const [muted, setMuted] = useState(() => videoRef.current?.muted ?? false);
|
|
||||||
|
|
||||||
// Sync state when the video element changes volume externally.
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
setVolume(video.volume);
|
|
||||||
setMuted(video.muted);
|
|
||||||
|
|
||||||
const onVolumeChange = () => {
|
|
||||||
setVolume(video.volume);
|
|
||||||
setMuted(video.muted);
|
|
||||||
};
|
|
||||||
video.addEventListener("volumechange", onVolumeChange);
|
|
||||||
return () => video.removeEventListener("volumechange", onVolumeChange);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onVolumeChange = (e: Event) => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
const val = parseFloat((e.target as HTMLInputElement).value);
|
|
||||||
video.volume = val;
|
|
||||||
setVolume(val);
|
|
||||||
if (val > 0 && video.muted) {
|
|
||||||
video.muted = false;
|
|
||||||
setMuted(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleMute = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
video.muted = !video.muted;
|
|
||||||
setMuted(video.muted);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="video-volume-row">
|
|
||||||
<ActionButton
|
|
||||||
icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
|
|
||||||
text={muted ? t("video.unmute") : t("video.mute")}
|
|
||||||
onClick={toggleMute}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
class="video-volume-slider"
|
|
||||||
min={0}
|
|
||||||
max={1}
|
|
||||||
step={0.05}
|
|
||||||
value={muted ? 0 : volume}
|
|
||||||
onInput={onVolumeChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
|
|
||||||
|
|
||||||
function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
|
||||||
const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
|
|
||||||
setSpeed(video.playbackRate);
|
|
||||||
|
|
||||||
const onRateChange = () => setSpeed(video.playbackRate);
|
|
||||||
video.addEventListener("ratechange", onRateChange);
|
|
||||||
return () => video.removeEventListener("ratechange", onRateChange);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const selectSpeed = (rate: number) => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
video.playbackRate = rate;
|
|
||||||
setSpeed(rate);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dropdown
|
|
||||||
iconAction
|
|
||||||
hideToggleArrow
|
|
||||||
buttonClassName="speed-dropdown"
|
|
||||||
text={<>
|
|
||||||
<Icon icon="bx bx-tachometer" />
|
|
||||||
<span class="video-speed-label">{speed}x</span>
|
|
||||||
</>}
|
|
||||||
title={t("video.playback-speed")}
|
|
||||||
>
|
|
||||||
{PLAYBACK_SPEEDS.map((rate) => (
|
|
||||||
<li key={rate}>
|
|
||||||
<button
|
|
||||||
class={`dropdown-item ${rate === speed ? "active" : ""}`}
|
|
||||||
onClick={() => selectSpeed(rate)}
|
|
||||||
>
|
|
||||||
{rate}x
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
|
||||||
const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
setLoop(video.loop);
|
|
||||||
|
|
||||||
const observer = new MutationObserver(() => setLoop(video.loop));
|
|
||||||
observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
|
|
||||||
return () => observer.disconnect();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggle = () => {
|
|
||||||
const video = videoRef.current;
|
|
||||||
if (!video) return;
|
|
||||||
video.loop = !video.loop;
|
|
||||||
setLoop(video.loop);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ActionButton
|
|
||||||
className={loop ? "active" : ""}
|
|
||||||
icon="bx bx-repeat"
|
|
||||||
text={loop ? t("video.disable-loop") : t("video.loop")}
|
|
||||||
onClick={toggle}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
||||||
const [rotation, setRotation] = useState(0);
|
const [rotation, setRotation] = useState(0);
|
||||||
|
|
||||||
@@ -414,7 +198,7 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
|
|||||||
return (
|
return (
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon="bx bx-rotate-right"
|
icon="bx bx-rotate-right"
|
||||||
text={t("video.rotate")}
|
text={t("media.rotate")}
|
||||||
onClick={rotate}
|
onClick={rotate}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -435,7 +219,7 @@ function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }
|
|||||||
<ActionButton
|
<ActionButton
|
||||||
className={fitted ? "active" : ""}
|
className={fitted ? "active" : ""}
|
||||||
icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
|
icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
|
||||||
text={fitted ? t("video.zoom-reset") : t("video.zoom-to-fit")}
|
text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
|
||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -460,7 +244,7 @@ function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoEle
|
|||||||
video.removeEventListener("enterpictureinpicture", onEnter);
|
video.removeEventListener("enterpictureinpicture", onEnter);
|
||||||
video.removeEventListener("leavepictureinpicture", onLeave);
|
video.removeEventListener("leavepictureinpicture", onLeave);
|
||||||
};
|
};
|
||||||
}, [supported]);
|
}, [ videoRef, supported ]);
|
||||||
|
|
||||||
if (!supported) return null;
|
if (!supported) return null;
|
||||||
|
|
||||||
@@ -478,7 +262,7 @@ function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoEle
|
|||||||
return (
|
return (
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon={active ? "bx bx-exit" : "bx bx-window-open"}
|
icon={active ? "bx bx-exit" : "bx bx-window-open"}
|
||||||
text={active ? t("video.exit-picture-in-picture") : t("video.picture-in-picture")}
|
text={active ? t("media.exit-picture-in-picture") : t("media.picture-in-picture")}
|
||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -507,7 +291,7 @@ function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> })
|
|||||||
return (
|
return (
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
|
icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
|
||||||
text={isFullscreen ? t("video.exit-fullscreen") : t("video.fullscreen")}
|
text={isFullscreen ? t("media.exit-fullscreen") : t("media.fullscreen")}
|
||||||
onClick={toggleFullscreen}
|
onClick={toggleFullscreen}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -97,7 +97,7 @@
|
|||||||
"html": "1.0.0",
|
"html": "1.0.0",
|
||||||
"html2plaintext": "2.1.4",
|
"html2plaintext": "2.1.4",
|
||||||
"http-proxy-agent": "7.0.2",
|
"http-proxy-agent": "7.0.2",
|
||||||
"https-proxy-agent": "7.0.6",
|
"https-proxy-agent": "8.0.0",
|
||||||
"i18next": "25.8.17",
|
"i18next": "25.8.17",
|
||||||
"i18next-fs-backend": "2.6.1",
|
"i18next-fs-backend": "2.6.1",
|
||||||
"image-type": "6.0.0",
|
"image-type": "6.0.0",
|
||||||
|
|||||||
@@ -197,5 +197,12 @@
|
|||||||
"description": "Trilium Notes는 간편한 접근 및 관리를 위해 유료 서비스인 PikaPods에서 호스팅할 수 있습니다. Trilium 팀과 직접 제휴되어있지는 않습니다.",
|
"description": "Trilium Notes는 간편한 접근 및 관리를 위해 유료 서비스인 PikaPods에서 호스팅할 수 있습니다. Trilium 팀과 직접 제휴되어있지는 않습니다.",
|
||||||
"download_pikapod": "PikaPods에서 설치하기",
|
"download_pikapod": "PikaPods에서 설치하기",
|
||||||
"download_triliumcc": "또는 trilium.cc를 참조하세요"
|
"download_triliumcc": "또는 trilium.cc를 참조하세요"
|
||||||
|
},
|
||||||
|
"resources": {
|
||||||
|
"title": "리소스",
|
||||||
|
"icon_packs": "아이콘 팩",
|
||||||
|
"icon_packs_intro": "아이콘 팩을 사용하여 노트에 사용할 수 있는 아이콘 종류를 늘려보세요. 아이콘 팩에 대한 자세한 내용은 <DocumentationLink>공식 문서</DocumentationLink>를 참조하세요.",
|
||||||
|
"download": "다운로드",
|
||||||
|
"website": "웹사이트"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -50,7 +50,9 @@
|
|||||||
"canvas_description": "Розташовуйте фігури, зображення та текст на нескінченному полотні, використовуючи ту саму технологію, що й excalidraw.com. Ідеально підходить для діаграм, ескізів та візуального планування.",
|
"canvas_description": "Розташовуйте фігури, зображення та текст на нескінченному полотні, використовуючи ту саму технологію, що й excalidraw.com. Ідеально підходить для діаграм, ескізів та візуального планування.",
|
||||||
"mermaid_description": "Створюйте діаграми, такі як блок-схеми, діаграми класів та послідовностей, діаграми Ганта та багато іншого, використовуючи синтаксис Mermaid.",
|
"mermaid_description": "Створюйте діаграми, такі як блок-схеми, діаграми класів та послідовностей, діаграми Ганта та багато іншого, використовуючи синтаксис Mermaid.",
|
||||||
"others_list": "та інші: <0>карта нотаток</0>, <1>карта зв'язків</1>, <2>збережені пошуки</2>, <3>візуалізація нотаток</3> та <4>веб-перегляди</4>.",
|
"others_list": "та інші: <0>карта нотаток</0>, <1>карта зв'язків</1>, <2>збережені пошуки</2>, <3>візуалізація нотаток</3> та <4>веб-перегляди</4>.",
|
||||||
"mermaid_title": "Mermaid діаграми"
|
"mermaid_title": "Mermaid діаграми",
|
||||||
|
"mindmap_title": "Карта думок",
|
||||||
|
"mindmap_description": "Візуально упорядкуйте свої думки або проведіть мозковий штурм."
|
||||||
},
|
},
|
||||||
"extensibility_benefits": {
|
"extensibility_benefits": {
|
||||||
"title": "Спільне використання та розширюваність",
|
"title": "Спільне використання та розширюваність",
|
||||||
@@ -59,7 +61,9 @@
|
|||||||
"share_title": "Діліться нотатками в Інтернеті",
|
"share_title": "Діліться нотатками в Інтернеті",
|
||||||
"share_description": "Якщо у Вас є сервер, Ви можете використати його, щоб поділитися частиною своїх нотаток з іншими людьми.",
|
"share_description": "Якщо у Вас є сервер, Ви можете використати його, щоб поділитися частиною своїх нотаток з іншими людьми.",
|
||||||
"api_title": "REST API",
|
"api_title": "REST API",
|
||||||
"api_description": "Взаємодійте з Trilium програмно, використовуючи його вбудований REST API."
|
"api_description": "Взаємодійте з Trilium програмно, використовуючи його вбудований REST API.",
|
||||||
|
"scripting_title": "Розширений скриптинг",
|
||||||
|
"scripting_description": "Створюйте власні інтеграції в Trilium за допомогою користувацьких віджетів або серверної логіки."
|
||||||
},
|
},
|
||||||
"collections": {
|
"collections": {
|
||||||
"title": "Колекції",
|
"title": "Колекції",
|
||||||
@@ -108,7 +112,8 @@
|
|||||||
"header": {
|
"header": {
|
||||||
"get-started": "Почати",
|
"get-started": "Почати",
|
||||||
"documentation": "Документація",
|
"documentation": "Документація",
|
||||||
"support-us": "Підтримайте нас"
|
"support-us": "Підтримайте нас",
|
||||||
|
"resources": "Ресурси"
|
||||||
},
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"copyright_and_the": " і ",
|
"copyright_and_the": " і ",
|
||||||
@@ -148,7 +153,8 @@
|
|||||||
"description_arm64": "Сумісний з пристроями ARM (наприклад, з Qualcomm Snapdragon).",
|
"description_arm64": "Сумісний з пристроями ARM (наприклад, з Qualcomm Snapdragon).",
|
||||||
"quick_start": "Щоб встановити через Winget:",
|
"quick_start": "Щоб встановити через Winget:",
|
||||||
"download_exe": "Завантажити інсталятор (.exe)",
|
"download_exe": "Завантажити інсталятор (.exe)",
|
||||||
"download_zip": "Портативний (.zip)"
|
"download_zip": "Портативний (.zip)",
|
||||||
|
"download_scoop": "Scoop"
|
||||||
},
|
},
|
||||||
"download_helper_desktop_linux": {
|
"download_helper_desktop_linux": {
|
||||||
"title_x64": "Linux 64-bit",
|
"title_x64": "Linux 64-bit",
|
||||||
@@ -159,23 +165,44 @@
|
|||||||
"download_deb": ".deb",
|
"download_deb": ".deb",
|
||||||
"download_rpm": ".rpm",
|
"download_rpm": ".rpm",
|
||||||
"download_flatpak": ".flatpak",
|
"download_flatpak": ".flatpak",
|
||||||
"download_nixpkgs": "nixpkgs"
|
"download_nixpkgs": "nixpkgs",
|
||||||
|
"download_zip": "Portable (.zip)",
|
||||||
|
"download_aur": "AUR"
|
||||||
},
|
},
|
||||||
"download_helper_desktop_macos": {
|
"download_helper_desktop_macos": {
|
||||||
"title_x64": "macOS для Intel",
|
"title_x64": "macOS для Intel",
|
||||||
"title_arm64": "macOS для Apple Silicon",
|
"title_arm64": "macOS для Apple Silicon",
|
||||||
"quick_start": "Для того, щоб встановити за допомогою Homebrew:",
|
"quick_start": "Для того, щоб встановити за допомогою Homebrew:",
|
||||||
"download_homebrew_cask": "Homebrew Cask"
|
"download_homebrew_cask": "Homebrew Cask",
|
||||||
|
"description_x64": "Для комп’ютерів Mac на базі Intel з macOS Monterey або пізнішої версії.",
|
||||||
|
"description_arm64": "Для комп'ютерів Apple Silicon Mac, таких як ті, що мають чіпи M1 та M2.",
|
||||||
|
"download_dmg": "Завантажити інсталятор (.dmg)",
|
||||||
|
"download_zip": "Portable (.zip)"
|
||||||
},
|
},
|
||||||
"download_helper_server_docker": {
|
"download_helper_server_docker": {
|
||||||
"download_dockerhub": "Docker Hub",
|
"download_dockerhub": "Docker Hub",
|
||||||
"download_ghcr": "ghcr.io"
|
"download_ghcr": "ghcr.io",
|
||||||
|
"title": "Self-hosted using Docker",
|
||||||
|
"description": "Легке розгортання на Windows, Linux або macOS за допомогою контейнера Docker."
|
||||||
},
|
},
|
||||||
"download_helper_server_linux": {
|
"download_helper_server_linux": {
|
||||||
"download_tar_x64": "x64 (.tar.xz)",
|
"download_tar_x64": "x64 (.tar.xz)",
|
||||||
"download_tar_arm64": "ARM (.tar.xz)"
|
"download_tar_arm64": "ARM (.tar.xz)",
|
||||||
|
"title": "Self-hosted on Linux",
|
||||||
|
"description": "Розгорніть Trilium Notes на власному сервері або VPS, сумісному з більшістю дистрибутивів.",
|
||||||
|
"download_nixos": "NixOS module"
|
||||||
},
|
},
|
||||||
"download_helper_server_hosted": {
|
"download_helper_server_hosted": {
|
||||||
"title": "Платний хостинг"
|
"title": "Платний хостинг",
|
||||||
|
"description": "Нотатки Trilium розміщені на PikaPods, платному сервісі для легкого доступу та керування. Не пов'язаний безпосередньо з командою Trilium.",
|
||||||
|
"download_pikapod": "Налаштування на PikaPods",
|
||||||
|
"download_triliumcc": "Або див. trilium.cc"
|
||||||
|
},
|
||||||
|
"resources": {
|
||||||
|
"title": "Ресурси",
|
||||||
|
"icon_packs": "Пакети піктограм",
|
||||||
|
"icon_packs_intro": "Розширте вибір доступних піктограм для ваших нотаток за допомогою пакету піктограм. Щоб отримати докладнішу інформацію про пакети піктограм, див. <DocumentationLink>офіційну документацію</DocumentationLink>.",
|
||||||
|
"download": "Завантажити",
|
||||||
|
"website": "Вебсайт"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
28
docs/README-ko.md
vendored
28
docs/README-ko.md
vendored
@@ -263,23 +263,19 @@ docs](https://github.com/TriliumNext/Trilium/tree/main/docs/Developer%20Guide/De
|
|||||||
* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - 텍스트 노트의 시각적 편집기입니다. 프리미엄
|
* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - 텍스트 노트의 시각적 편집기입니다. 프리미엄
|
||||||
기능을 제공해주셔서 감사합니다.
|
기능을 제공해주셔서 감사합니다.
|
||||||
* [CodeMirror](https://github.com/codemirror/CodeMirror) - 수많은 언어를 지원하는 코드 편집기.
|
* [CodeMirror](https://github.com/codemirror/CodeMirror) - 수많은 언어를 지원하는 코드 편집기.
|
||||||
* [Excalidraw](https://github.com/excalidraw/excalidraw) - the infinite
|
* [Excalidraw](https://github.com/excalidraw/excalidraw) - Canvas 노트에서 사용되는 무한
|
||||||
whiteboard used in Canvas notes.
|
화이트보드입니다.
|
||||||
* [Mind Elixir](https://github.com/SSShooter/mind-elixir-core) - providing the
|
* [Mind Elixir](https://github.com/SSShooter/mind-elixir-core) - 마인드맵 기능을 제공합니다.
|
||||||
mind map functionality.
|
* [Leaflet](https://github.com/Leaflet/Leaflet) - 지리 지도를 렌더링 합니다.
|
||||||
* [Leaflet](https://github.com/Leaflet/Leaflet) - for rendering geographical
|
* [Tabulator](https://github.com/olifolkerd/tabulator) - 컬렉션에서 사용되는 인터랙티브
|
||||||
maps.
|
테이블입니다.
|
||||||
* [Tabulator](https://github.com/olifolkerd/tabulator) - for the interactive
|
* [FancyTree](https://github.com/mar10/fancytree) - 독보적으로 기능이 풍부한 트리 라이브러리입니다.
|
||||||
table used in collections.
|
* [jsPlumb](https://github.com/jsplumb/jsplumb) - 시각적 연결 라이브러리입니다. [관계
|
||||||
* [FancyTree](https://github.com/mar10/fancytree) - feature-rich tree library
|
맵](https://docs.triliumnotes.org/user-guide/note-types/relation-map) 과 [링크
|
||||||
without real competition.
|
맵](https://docs.triliumnotes.org/user-guide/advanced-usage/note-map#link-map)에
|
||||||
* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library.
|
사용됩니다
|
||||||
Used in [relation
|
|
||||||
maps](https://docs.triliumnotes.org/user-guide/note-types/relation-map) and
|
|
||||||
[link
|
|
||||||
maps](https://docs.triliumnotes.org/user-guide/advanced-usage/note-map#link-map)
|
|
||||||
|
|
||||||
## 🤝 Support
|
## 🤝 후원
|
||||||
|
|
||||||
Trilium is built and maintained with [hundreds of hours of
|
Trilium is built and maintained with [hundreds of hours of
|
||||||
work](https://github.com/TriliumNext/Trilium/graphs/commit-activity). Your
|
work](https://github.com/TriliumNext/Trilium/graphs/commit-activity). Your
|
||||||
|
|||||||
46
docs/README-uk.md
vendored
46
docs/README-uk.md
vendored
@@ -95,8 +95,8 @@ Trilium Notes — це безкоштовний кросплатформний
|
|||||||
безпечнішого входу
|
безпечнішого входу
|
||||||
* [Синхронізація](https://docs.triliumnotes.org/user-guide/setup/synchronization)
|
* [Синхронізація](https://docs.triliumnotes.org/user-guide/setup/synchronization)
|
||||||
із власним сервером синхронізації
|
із власним сервером синхронізації
|
||||||
* there are [3rd party services for hosting synchronisation
|
* існують [сторонні сервіси для розміщення сервера
|
||||||
server](https://docs.triliumnotes.org/user-guide/setup/server/cloud-hosting)
|
синхронізації](https://docs.triliumnotes.org/user-guide/setup/server/cloud-hosting)
|
||||||
* [Спільне
|
* [Спільне
|
||||||
використання](https://docs.triliumnotes.org/user-guide/advanced-usage/sharing)
|
використання](https://docs.triliumnotes.org/user-guide/advanced-usage/sharing)
|
||||||
(публікація) нотаток у загальнодоступному інтернеті
|
(публікація) нотаток у загальнодоступному інтернеті
|
||||||
@@ -105,10 +105,11 @@ Trilium Notes — це безкоштовний кросплатформний
|
|||||||
з деталізацією для кожної нотатки
|
з деталізацією для кожної нотатки
|
||||||
* Створення ескізних схем на основі [Excalidraw](https://excalidraw.com/) (тип
|
* Створення ескізних схем на основі [Excalidraw](https://excalidraw.com/) (тип
|
||||||
нотатки "полотно")
|
нотатки "полотно")
|
||||||
* [Relation
|
* [Карти
|
||||||
maps](https://docs.triliumnotes.org/user-guide/note-types/relation-map) and
|
зв'язків](https://docs.triliumnotes.org/user-guide/note-types/relation-map) та
|
||||||
[note/link maps](https://docs.triliumnotes.org/user-guide/note-types/note-map)
|
[карти
|
||||||
for visualizing notes and their relations
|
нотаток/посилань](https://docs.triliumnotes.org/user-guide/note-types/note-map)
|
||||||
|
для візуалізації нотаток та їх зв'язків
|
||||||
* Інтелект-карти, засновані на [Mind Elixir](https://docs.mind-elixir.com/)
|
* Інтелект-карти, засновані на [Mind Elixir](https://docs.mind-elixir.com/)
|
||||||
* [Геокарти](https://docs.triliumnotes.org/user-guide/collections/geomap) з
|
* [Геокарти](https://docs.triliumnotes.org/user-guide/collections/geomap) з
|
||||||
географічними позначками та GPX-треками
|
географічними позначками та GPX-треками
|
||||||
@@ -148,19 +149,18 @@ TriliumNext:
|
|||||||
надав репозиторій Trilium спільнотному проекту, який знаходиться за адресою
|
надав репозиторій Trilium спільнотному проекту, який знаходиться за адресою
|
||||||
https://github.com/TriliumNext
|
https://github.com/TriliumNext
|
||||||
|
|
||||||
### ⬆️Migrating from Zadam/Trilium?
|
### ⬆️Переходите із Zadam/Trilium?
|
||||||
|
|
||||||
There are no special migration steps to migrate from a zadam/Trilium instance to
|
Немає жодних спеціальних кроків для міграції з екземпляра zadam/Trilium до
|
||||||
a TriliumNext/Trilium instance. Simply [install
|
екземпляра TriliumNext/Trilium. Просто [встановіть
|
||||||
TriliumNext/Trilium](#-installation) as usual and it will use your existing
|
TriliumNext/Trilium](#-installation) як завжди, і він використовуватиме вашу
|
||||||
database.
|
існуючу базу даних.
|
||||||
|
|
||||||
Versions up to and including
|
Версії до [v0.90.4](https://github.com/TriliumNext/Trilium/releases/tag/v0.90.4)
|
||||||
[v0.90.4](https://github.com/TriliumNext/Trilium/releases/tag/v0.90.4) are
|
включно сумісні з останньою версією zadam/trilium
|
||||||
compatible with the latest zadam/trilium version of
|
[v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Будь-які
|
||||||
[v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later
|
пізніші версії TriliumNext/Trilium мають збільшені версії синхронізації, що
|
||||||
versions of TriliumNext/Trilium have their sync versions incremented which
|
запобігає прямій міграції.
|
||||||
prevents direct migration.
|
|
||||||
|
|
||||||
## Обговоріть це з нами
|
## Обговоріть це з нами
|
||||||
|
|
||||||
@@ -189,8 +189,8 @@ prevents direct migration.
|
|||||||
Якщо ваш дистрибутив зазначено в таблиці нижче, використовуйте пакет вашого
|
Якщо ваш дистрибутив зазначено в таблиці нижче, використовуйте пакет вашого
|
||||||
дистрибутива.
|
дистрибутива.
|
||||||
|
|
||||||
[](https://repology.org/project/triliumnext/versions)
|
упаковки](https://repology.org/badge/vertical-allrepos/triliumnext.svg)](https://repology.org/project/triliumnext/versions)
|
||||||
|
|
||||||
Ви також можете завантажити бінарний реліз для вашої платформи зі сторінки
|
Ви також можете завантажити бінарний реліз для вашої платформи зі сторінки
|
||||||
[останнього релізу](https://github.com/TriliumNext/Trilium/releases/latest),
|
[останнього релізу](https://github.com/TriliumNext/Trilium/releases/latest),
|
||||||
@@ -281,10 +281,10 @@ pnpm run --filter desktop electron-forge:make --arch=x64 --platform=win32
|
|||||||
|
|
||||||
### Документація розробника
|
### Документація розробника
|
||||||
|
|
||||||
Please view the [documentation
|
Будь ласка, перегляньте
|
||||||
guide](https://github.com/TriliumNext/Trilium/blob/main/docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md)
|
[документацію](https://github.com/TriliumNext/Trilium/blob/main/docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md)
|
||||||
for details. If you have more questions, feel free to reach out via the links
|
для отримання детальної інформації. Якщо у вас виникнуть додаткові запитання,
|
||||||
described in the "Discuss with us" section above.
|
звертайтеся до нас за посиланнями, описаними в розділі «Обговоріть з нами» вище.
|
||||||
|
|
||||||
## 👏 Привітання
|
## 👏 Привітання
|
||||||
|
|
||||||
|
|||||||
35
pnpm-lock.yaml
generated
35
pnpm-lock.yaml
generated
@@ -755,8 +755,8 @@ importers:
|
|||||||
specifier: 7.0.2
|
specifier: 7.0.2
|
||||||
version: 7.0.2
|
version: 7.0.2
|
||||||
https-proxy-agent:
|
https-proxy-agent:
|
||||||
specifier: 7.0.6
|
specifier: 8.0.0
|
||||||
version: 7.0.6
|
version: 8.0.0
|
||||||
i18next:
|
i18next:
|
||||||
specifier: 25.8.17
|
specifier: 25.8.17
|
||||||
version: 25.8.17(typescript@5.9.3)
|
version: 25.8.17(typescript@5.9.3)
|
||||||
@@ -7468,6 +7468,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
|
resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
|
||||||
engines: {node: '>= 14'}
|
engines: {node: '>= 14'}
|
||||||
|
|
||||||
|
agent-base@8.0.0:
|
||||||
|
resolution: {integrity: sha512-QT8i0hCz6C/KQ+KTAbSNwCHDGdmUJl2tp2ZpNlGSWCfhUNVbYG2WLE3MdZGBAgXPV4GAvjGMxo+C1hroyxmZEg==}
|
||||||
|
engines: {node: '>= 14'}
|
||||||
|
|
||||||
agentkeepalive@4.6.0:
|
agentkeepalive@4.6.0:
|
||||||
resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
|
resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
|
||||||
engines: {node: '>= 8.0.0'}
|
engines: {node: '>= 8.0.0'}
|
||||||
@@ -10593,6 +10597,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
|
resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
|
||||||
engines: {node: '>= 14'}
|
engines: {node: '>= 14'}
|
||||||
|
|
||||||
|
https-proxy-agent@8.0.0:
|
||||||
|
resolution: {integrity: sha512-YYeW+iCnAS3xhvj2dvVoWgsbca3RfQy/IlaNHHOtDmU0jMqPI9euIq3Y9BJETdxk16h9NHHCKqp/KB9nIMStCQ==}
|
||||||
|
engines: {node: '>= 14'}
|
||||||
|
|
||||||
human-signals@2.1.0:
|
human-signals@2.1.0:
|
||||||
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
|
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
|
||||||
engines: {node: '>=10.17.0'}
|
engines: {node: '>=10.17.0'}
|
||||||
@@ -17289,8 +17297,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-core': 47.4.0
|
'@ckeditor/ckeditor5-core': 47.4.0
|
||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-code-block@47.4.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
|
'@ckeditor/ckeditor5-code-block@47.4.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -17483,8 +17489,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
es-toolkit: 1.39.5
|
es-toolkit: 1.39.5
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-editor-classic@47.4.0':
|
'@ckeditor/ckeditor5-editor-classic@47.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -17494,8 +17498,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
es-toolkit: 1.39.5
|
es-toolkit: 1.39.5
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-editor-decoupled@47.4.0':
|
'@ckeditor/ckeditor5-editor-decoupled@47.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -17696,8 +17698,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
'@ckeditor/ckeditor5-widget': 47.4.0
|
'@ckeditor/ckeditor5-widget': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-html-embed@47.4.0':
|
'@ckeditor/ckeditor5-html-embed@47.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -18027,8 +18027,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-ui': 47.4.0
|
'@ckeditor/ckeditor5-ui': 47.4.0
|
||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-restricted-editing@47.4.0':
|
'@ckeditor/ckeditor5-restricted-editing@47.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -18115,8 +18113,6 @@ snapshots:
|
|||||||
'@ckeditor/ckeditor5-ui': 47.4.0
|
'@ckeditor/ckeditor5-ui': 47.4.0
|
||||||
'@ckeditor/ckeditor5-utils': 47.4.0
|
'@ckeditor/ckeditor5-utils': 47.4.0
|
||||||
ckeditor5: 47.4.0
|
ckeditor5: 47.4.0
|
||||||
transitivePeerDependencies:
|
|
||||||
- supports-color
|
|
||||||
|
|
||||||
'@ckeditor/ckeditor5-special-characters@47.4.0':
|
'@ckeditor/ckeditor5-special-characters@47.4.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -25090,6 +25086,8 @@ snapshots:
|
|||||||
|
|
||||||
agent-base@7.1.4: {}
|
agent-base@7.1.4: {}
|
||||||
|
|
||||||
|
agent-base@8.0.0: {}
|
||||||
|
|
||||||
agentkeepalive@4.6.0:
|
agentkeepalive@4.6.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
humanize-ms: 1.2.1
|
humanize-ms: 1.2.1
|
||||||
@@ -29182,7 +29180,14 @@ snapshots:
|
|||||||
|
|
||||||
https-proxy-agent@7.0.6:
|
https-proxy-agent@7.0.6:
|
||||||
dependencies:
|
dependencies:
|
||||||
agent-base: 7.1.3
|
agent-base: 7.1.4
|
||||||
|
debug: 4.4.3(supports-color@8.1.1)
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
|
|
||||||
|
https-proxy-agent@8.0.0:
|
||||||
|
dependencies:
|
||||||
|
agent-base: 8.0.0
|
||||||
debug: 4.4.3(supports-color@8.1.1)
|
debug: 4.4.3(supports-color@8.1.1)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|||||||
Reference in New Issue
Block a user