mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-05 23:25:44 -05:00
feat: add changelog entry in preparation for update
This commit is contained in:
Paul Makles
parent
75d07ffe0f
commit
f20ada7c49
11 changed files with 232 additions and 12 deletions
|
|
@ -46,6 +46,7 @@
|
|||
"dependencies": {
|
||||
"fs-extra": "^10.0.0",
|
||||
"klaw": "^3.0.0",
|
||||
"lottie-react": "^2.4.0",
|
||||
"sirv-cli": "^1.0.14",
|
||||
"vite": "^3.0.5"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +1,17 @@
|
|||
import Lottie, { LottieRefCurrentProps } from "lottie-react";
|
||||
|
||||
import { JSX } from "preact";
|
||||
|
||||
import usernameAnim from "../controllers/modals/components/legacy/usernameUpdateLottie.json";
|
||||
|
||||
type Element =
|
||||
| string
|
||||
| {
|
||||
type: "image";
|
||||
src: string;
|
||||
shadow?: boolean;
|
||||
};
|
||||
}
|
||||
| { type: "element"; element: JSX.Element };
|
||||
|
||||
export interface ChangelogPost {
|
||||
date: Date;
|
||||
|
|
@ -43,6 +50,33 @@ export const changelogEntries: Record<number, ChangelogPost> = {
|
|||
"If you want to learn more about how we're making Revolt safer for you, check out our new blog post :point_right: [https://revolt.chat/posts/improving-user-safety](https://revolt.chat/posts/improving-user-safety)",
|
||||
],
|
||||
},
|
||||
3: {
|
||||
date: new Date("2023-06-11T15:00:00.000Z"),
|
||||
title: "Usernames are Changing",
|
||||
content: [
|
||||
{
|
||||
type: "element",
|
||||
element: (
|
||||
<Lottie
|
||||
animationData={usernameAnim}
|
||||
style={{
|
||||
background: "var(--secondary-background)",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
"Revolt has undergone a significant change to its username system, transitioning from unique username handles to a new system of display names and usernames with four-digit number tags called discriminators. The four-digit number tags serve as identifiers to differentiate users with the same username, allowing individuals to select desired usernames that reflect their identity.",
|
||||
{
|
||||
type: "element",
|
||||
element: (
|
||||
<a href="https://revolt.chat/post/evolving-usernames">
|
||||
Read more on our blog!
|
||||
</a>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const changelogEntryArray = Object.keys(changelogEntries).map(
|
||||
|
|
@ -18,6 +18,7 @@ import { history } from "../../context/history";
|
|||
import AddFriend from "./components/AddFriend";
|
||||
import BanMember from "./components/BanMember";
|
||||
import Changelog from "./components/Changelog";
|
||||
import ChangelogUsernames from "./components/ChangelogUsernames";
|
||||
import ChannelInfo from "./components/ChannelInfo";
|
||||
import Clipboard from "./components/Clipboard";
|
||||
import ConfirmLeave from "./components/ConfirmLeave";
|
||||
|
|
@ -282,4 +283,5 @@ export const modalController = new ModalControllerExtended({
|
|||
report: ReportContent,
|
||||
report_success: ReportSuccess,
|
||||
modify_displayname: ModifyDisplayname,
|
||||
changelog_usernames: ChangelogUsernames,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ function RenderLog({ post }: { post: ChangelogPost }) {
|
|||
{post.content.map((entry) =>
|
||||
typeof entry === "string" ? (
|
||||
<Markdown content={entry} />
|
||||
) : entry.type === "element" ? (
|
||||
entry.element
|
||||
) : (
|
||||
<Image src={entry.src} shadow={entry.shadow} />
|
||||
),
|
||||
|
|
|
|||
146
src/controllers/modals/components/ChangelogUsernames.tsx
Normal file
146
src/controllers/modals/components/ChangelogUsernames.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import Lottie, { LottieRefCurrentProps } from "lottie-react";
|
||||
|
||||
import { useEffect, useRef } from "preact/hooks";
|
||||
|
||||
import { Button, Column, InputBox, Modal, Row } from "@revoltchat/ui";
|
||||
|
||||
import { useClient } from "../../client/ClientController";
|
||||
import { modalController } from "../ModalController";
|
||||
import { ModalProps } from "../types";
|
||||
import usernameAnim from "./legacy/usernameUpdateLottie.json";
|
||||
|
||||
/**
|
||||
* Changelog: Username update
|
||||
*/
|
||||
export default function ChangelogUsernames({
|
||||
onClose,
|
||||
signal,
|
||||
}: ModalProps<"changelog_usernames">) {
|
||||
const client = useClient();
|
||||
|
||||
const lottieRef = useRef<LottieRefCurrentProps>();
|
||||
|
||||
useEffect(() => {
|
||||
if (lottieRef.current) {
|
||||
const timer = setTimeout(() => lottieRef.current!.play(), 2500);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [lottieRef]);
|
||||
|
||||
return (
|
||||
<Modal onClose={onClose} signal={signal} transparent>
|
||||
{
|
||||
(
|
||||
<Column gap="0">
|
||||
<div
|
||||
style={{
|
||||
background: "black",
|
||||
borderStartStartRadius: "12px",
|
||||
borderStartEndRadius: "12px",
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
padding: "1.5em",
|
||||
}}>
|
||||
<Lottie
|
||||
lottieRef={lottieRef as never}
|
||||
animationData={usernameAnim}
|
||||
autoplay={false}
|
||||
loop={false}
|
||||
style={{ width: "240px" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: "1em",
|
||||
background: "var(--secondary-header)",
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<Column
|
||||
gap="6px"
|
||||
style={{
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "1.5em",
|
||||
fontWeight: 700,
|
||||
marginBottom: "12px",
|
||||
}}>
|
||||
Usernames are Changing
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "var(--secondary-foreground)",
|
||||
fontSize: "0.9em",
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
We've changed how usernames work on Revolt.
|
||||
Now you can set a display name in addition
|
||||
to a username with a number tag for easier
|
||||
sharing.
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "var(--secondary-foreground)",
|
||||
fontSize: "0.9em",
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
Here's how your new username looks:
|
||||
</span>
|
||||
<InputBox
|
||||
value={
|
||||
client.user!.display_name ??
|
||||
client.user!.username
|
||||
}
|
||||
style={{
|
||||
maxWidth: "180px",
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<InputBox
|
||||
value={
|
||||
client.user.username +
|
||||
"#" +
|
||||
client.user.discriminator
|
||||
}
|
||||
style={{
|
||||
maxWidth: "180px",
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<a
|
||||
href="https://revolt.chat/posts/evolving-usernames"
|
||||
target="_blank">
|
||||
Read more about this change
|
||||
</a>
|
||||
</Column>
|
||||
</div>
|
||||
<Row
|
||||
style={{
|
||||
padding: "1em",
|
||||
borderEndStartRadius: "12px",
|
||||
borderEndEndRadius: "12px",
|
||||
background: "var(--secondary-background)",
|
||||
textAlign: "center",
|
||||
justifyContent: "end",
|
||||
}}>
|
||||
<Button palette="plain" onClick={onClose}>
|
||||
Skip for now
|
||||
</Button>
|
||||
<Button
|
||||
palette="accent"
|
||||
onClick={() => {
|
||||
modalController.openLink(
|
||||
"/settings/profile",
|
||||
);
|
||||
onClose();
|
||||
}}>
|
||||
Edit Profile
|
||||
</Button>
|
||||
</Row>
|
||||
</Column>
|
||||
) as any
|
||||
}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -170,9 +170,8 @@ export default function ModifyAccount({
|
|||
{field === "username" && (
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
<Tip palette="warning">
|
||||
Changing your username may change your
|
||||
discriminator. You can freely change the case of
|
||||
your username.
|
||||
Changing your username may change your number tag.
|
||||
You can freely change the case of your username.
|
||||
</Tip>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -72,9 +72,8 @@ export function OnboardingModal({
|
|||
/>
|
||||
</div>
|
||||
<p>
|
||||
You will be automatically assigned a
|
||||
discriminator which you can find from
|
||||
settings.
|
||||
You will be automatically assigned a number
|
||||
tag which you can find from settings.
|
||||
</p>
|
||||
<Button palette="accent">
|
||||
{"Looks good!"}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -41,6 +41,7 @@ export type Modal = {
|
|||
type: "changelog";
|
||||
initial?: number;
|
||||
}
|
||||
| { type: "changelog_usernames" }
|
||||
| {
|
||||
type: "sign_out_sessions";
|
||||
client: Client;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { action, makeAutoObservable, runInAction } from "mobx";
|
||||
|
||||
import { latestChangelog } from "../../assets/changelogs";
|
||||
import { changelogEntries, latestChangelog } from "../../assets/changelogs";
|
||||
import { modalController } from "../../controllers/modals/ModalController";
|
||||
import Persistent from "../interfaces/Persistent";
|
||||
import Store from "../interfaces/Store";
|
||||
|
|
@ -58,14 +58,29 @@ export default class Changelog implements Store, Persistent<Data>, Syncable {
|
|||
*/
|
||||
checkForUpdates() {
|
||||
if (this.viewed < latestChangelog) {
|
||||
modalController.push({
|
||||
type: "changelog",
|
||||
initial: latestChangelog,
|
||||
});
|
||||
const expires = new Date(+changelogEntries[latestChangelog].date);
|
||||
expires.setDate(expires.getDate() + 7);
|
||||
|
||||
if (+new Date() < +expires) {
|
||||
if (latestChangelog === 3) {
|
||||
modalController.push({
|
||||
type: "changelog_usernames",
|
||||
});
|
||||
} else {
|
||||
modalController.push({
|
||||
type: "changelog",
|
||||
initial: latestChangelog,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
runInAction(() => {
|
||||
this.viewed = latestChangelog;
|
||||
});
|
||||
} else {
|
||||
modalController.push({
|
||||
type: "changelog_usernames",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
yarn.lock
20
yarn.lock
|
|
@ -3732,6 +3732,7 @@ __metadata:
|
|||
lodash.defaultsdeep: ^4.6.1
|
||||
lodash.isequal: ^4.5.0
|
||||
long: ^5.2.0
|
||||
lottie-react: ^2.4.0
|
||||
mdast-util-to-hast: ^12.1.2
|
||||
mediasoup-client: "npm:@insertish/mediasoup-client@3.6.36-esnext"
|
||||
mobx: ^6.6.0
|
||||
|
|
@ -6205,6 +6206,25 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lottie-react@npm:^2.4.0":
|
||||
version: 2.4.0
|
||||
resolution: "lottie-react@npm:2.4.0"
|
||||
dependencies:
|
||||
lottie-web: ^5.10.2
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lottie-web@npm:^5.10.2":
|
||||
version: 5.12.0
|
||||
resolution: "lottie-web@npm:5.12.0"
|
||||
checksum: 77c35be880e484d1a766f21f789ede7c7be59e957579580a18c2dfec08c4812c03e1d652e453166c31fd80556446d6b857fb490d901e34154105532519bc5ef5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lru-cache@npm:^6.0.0":
|
||||
version: 6.0.0
|
||||
resolution: "lru-cache@npm:6.0.0"
|
||||
|
|
|
|||
Loading…
Reference in a new issue