Skip to content

feat(): new 3d timeline #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jgw96 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(): new 3d timeline #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"idb-keyval": "^6.2.0",
"lit": "^3.3.2",
"marked": "^17.0.1",
"three": "^0.184.0",
"urlpattern-polyfill": "^10.1.0",
"web-router": "^0.5.0"
},
Expand All @@ -73,6 +74,7 @@
"@playwright/test": "^1.50.0",
"@rollup/plugin-typescript": "^12.3.0",
"@types/dom-navigation": "^1.0.6",
"@types/three": "^0.184.0",
"@typescript-eslint/eslint-plugin": "^8.48.1",
"@typescript-eslint/parser": "^8.48.1",
"@vitest/browser": "^4.0.16",
Expand Down
45 changes: 45 additions & 0 deletions src/components/settings-drawer-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export class SettingsDrawerContent extends LitElement {
@property({ type: Boolean }) wellnessMode = false;
@property({ type: Boolean }) dataSaverMode = false;
@property({ type: Boolean }) hapticsEnabled = true;
@property({ type: Boolean }) experimental3dTimelineEnabled = false;
@property({ type: Boolean }) appThemeLoaded = false;

@state() private isAndroid = false;
Expand All @@ -58,6 +59,10 @@ export class SettingsDrawerContent extends LitElement {
margin-top: 16px;
}

#warp-timeline-button {
margin-top: 16px;
}

md-card md-divider {
margin-top: 20px;
margin-bottom: 20px;
Expand Down Expand Up @@ -358,6 +363,10 @@ export class SettingsDrawerContent extends LitElement {
router.navigate('/announcements');
}

private _openWarpTimeline() {
router.navigate('/warp');
}

private _formatAnnouncementDate(iso: string): string {
try {
return new Intl.DateTimeFormat(undefined, {
Expand Down Expand Up @@ -400,6 +409,17 @@ export class SettingsDrawerContent extends LitElement {
);
}

private handleExperimental3dTimelineToggle(e: Event) {
const checked = (e.target as HTMLInputElement).checked;
this.dispatchEvent(
new CustomEvent('experimental-3d-timeline-change', {
detail: { checked },
bubbles: true,
composed: true,
})
);
}

render() {
return html`
<div class="settings-cards">
Expand Down Expand Up @@ -519,6 +539,31 @@ export class SettingsDrawerContent extends LitElement {
${msg('Vibrate on actions like likes, boosts, and publishing.')}
</p>

<md-divider></md-divider>

<div class="setting-row">
<h4>${msg('Experimental 3D Timeline')}</h4>
<md-switch
@sl-change="${(e: Event) =>
this.handleExperimental3dTimelineToggle(e)}"
?checked="${this.experimental3dTimelineEnabled}"
></md-switch>
</div>
<p class="setting-description">
${msg('Try an experitment in exploring posts in 3D.')}
</p>

${this.experimental3dTimelineEnabled
? html`
<md-button
variant="tonal"
@click="${() => this._openWarpTimeline()}"
id="warp-timeline-button"
>
${msg('Open Warp Timeline')}
</md-button>
`
: nothing}
${this.isAndroid
? html`
<md-divider></md-divider>
Expand Down
34 changes: 20 additions & 14 deletions src/generated/locales/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,9 @@ export const templates = {
s06e80274b5700572: `Option entfernen`,
s075ba6594b3909dc: `Direkt`,
s079a052719914d71: `Kategorie`,
s07a00d850d958329: `Essen`,
s07c165a4537f8c77: `Noch keine Erwähnungen`,
s07e6118e838b2e23: `Navigation`,
s0843b2fcef33fcc8: `Veröffentlichen`,
s08ce549fa4d15dfd: `Wissenschaft`,
s0a3a833266cb4585: `Beitrag bearbeiten`,
s0a5df04b5c6d2f9f: `Deine Umfrage`,
s0a75f9328a2fb427: `Scrolle und tippe auf "Zum Home-Bildschirm"`,
Expand All @@ -36,7 +34,6 @@ export const templates = {
s17fb3f4805f4f4b9: `Feld entfernen`,
s181de3190f4abb2c: `Teilen`,
s191badfb60321854: `Füge Coho zu deinem Startbildschirm hinzu für das beste Erlebnis`,
s19617036a468a75f: `Mode`,
s1967faf9ed8d3504: `Avatar`,
s1bb6c905f66815eb: `App installieren`,
s1dc17af39243deee: `Für Mastodon-Konto registrieren`,
Expand All @@ -47,7 +44,6 @@ export const templates = {
s20a500234e838dda: `Favoriten`,
s216407f266691656: `Geteiltes Bild konnte nicht geladen werden. Bitte versuche es erneut.`,
s21f68e65dbf5b5a4: `Verarbeite...`,
s233ae776268cd44b: `Wirtschaft`,
s251903053fa7a51e: `Folge...`,
s26c4bbcf4df6673b: `Thread erweitern`,
s275772c501fb3b2e: `Nicht jetzt`,
Expand Down Expand Up @@ -148,7 +144,6 @@ export const templates = {
s8946af4df69fe739: `Du folgst`,
s897531ca8a270ee9: `Vorgeschlagene Änderung`,
s8997c16cd0e93271: `Wellness-Modus`,
s8a127bd255333eda: `Sport`,
s8af61807443f32a4: `Aktionen`,
s8bf481a0b5d8a689: `Generiere...`,
s8cdcbe65c5e46f7a: `Erneut versuchen`,
Expand All @@ -163,7 +158,6 @@ export const templates = {
s9a46ff9baa276602: `zurück`,
s9ac7f1d0c67c0118: `Bild bearbeiten`,
s9c1fe7b413b74ce5: `Benachrichtigungen öffnen`,
s9ca372a6096ddd54: `Musik`,
s9d3248be9803bbe0: `Antworte auf diesen Beitrag...`,
s9d8b8aa2b404c2c8: `Einstellungen`,
s9dce1fb8226d0cdd: `Beitrag öffnen`,
Expand All @@ -180,7 +174,6 @@ export const templates = {
saccb9cc846d8abd3: `hat einen Beitrag bearbeitet`,
sadf9c2063e1497b7: `Dein moderner Mastodon-Client`,
sae77551833d7117b: `Der Wellness-Modus blendet Likes und Boosts aus.`,
sb0a26af3eb6ab88e: `Politik`,
sb16c59bda3cb5c45: `Filter anwenden...`,
sb23eed07fcaf3095: `Abstimmen`,
sb32cad250448883a: `Aufnahme stoppen`,
Expand All @@ -190,20 +183,15 @@ export const templates = {
sb60bbe250aad3fa8: `Spam`,
sb72a4b091e8795b3: `Suche öffnen`,
sb78a66c8b3d23215: `Prüfe...`,
sb8f030e19d93bb79: `Unterhaltung`,
sb8f855b49234b81b: `Anwenden`,
sbaf0a7c417e388af: `Gesundheit`,
sbb15471af4d8dc52: `Erkenne...`,
sbb87af74ab3706b9: `Reisen`,
sbba6a0f5864827d4: `Verfassen`,
sbd1a5d538201dae8: `Vom Dock oder Startbildschirm starten`,
sbd20a2111e25f4ea: `Verstanden`,
sbdeedc1c60306b35: `Nachrichten`,
sbec848a6b81917c0: `Lifestyle`,
sc0894569c67f140e: `Kein Spoiler-Text angegeben`,
sc15ed31aec49dd18: `Trends`,
sc2b1e7582843b682: `Mehrfachauswahl erlauben`,
sc565503c7584ed60: `Interessen`,
sc685d7705585c76f: `Zeitleiste aktualisieren`,
sc7e5b0355146889c: `Zu Nachrichten`,
sc8da3cc71de63832: `Anmelden`,
Expand All @@ -229,7 +217,6 @@ export const templates = {
sdec709236764aa73: `Vorschau schließen`,
sdee2dd4540cbfa57: str`${0} Beiträge heute`,
se06934af5f7f49eb: `Wähle eine oder mehrere`,
se088dfba6684a16f: `Technologie`,
se09b308c799d5a44: `0 Follower`,
se13b1d97003596bc: `Beiträge`,
se1ec1972bbf775cb: `Du surfst als Gast. Melde dich an, um mit Beiträgen zu interagieren und alle Funktionen zu nutzen.`,
Expand Down Expand Up @@ -258,7 +245,6 @@ export const templates = {
sf886a1d8bd2479a9: `Spracheingabe`,
sf993bb199fefbe04: `Alle`,
sf9ca5cc93c622eb7: `Nicht gelistet`,
sf9f8d719a044edca: `Kunst`,
sfa3341f85163e600: `Medien anhängen`,
sfa847f22cbd9bff5: `Übersetzen`,
sfb6d64d0e61d8dba: `An entfernten Server weiterleiten`,
Expand Down Expand Up @@ -531,6 +517,9 @@ export const templates = {
s2b5047d39b9baf3d: `Preferences`,
s399b2152de758495: `Haptic Feedback`,
s1210a6c6ad65d97b: `Vibrate on actions like likes, boosts, and publishing.`,
s89fa731572319ad5: `Experimental 3D Timeline`,
s540ee2367481ff18: `Try an experitment in exploring posts in 3D.`,
s889f72a85fa15194: `Open Warp Timeline`,
s5ddb4ae6884197c4: `Sync to Watch`,
s36c13bb456523146: `Synced ✓`,
s9cd4984f1a746b40: `Syncing…`,
Expand Down Expand Up @@ -562,6 +551,23 @@ export const templates = {
s2bcebb0b6a6517b6: `Search for your server to connect another Mastodon account.`,
s626c98f49c83a793: `Search for a Mastodon server`,
s6d83773bf37278f8: `Starting OAuth...`,
s1714a4b01daaca2b: `3D timeline prototype`,
s122c4e6c8ff0ed45: `Exit`,
sd655df7903434847: `Warp timeline is off`,
s12b5b398412ee0ae: `Enable the experimental 3D timeline from Settings to try this prototype.`,
sc16e00a7a8b2fde2: `Back`,
s9078ee819c18df6e: `Enable`,
sd808756d0ff4e16f: `Motion preference respected`,
s94cb988cb2673ab2: `The 3D timeline is paused because reduced motion is enabled on this device.`,
s2f79bb23775ba5c8: `This may be demanding`,
sfeabaa95f8aaf253: `This prototype uses WebGL and may be less smooth on this device.`,
s81ecf2d4386b8e84: `Continue`,
sd94680e71442a0d0: `Could not load the warp`,
s983be4a3a60636b1: `No posts to warp through`,
s06e3d2ab959d506f: `Your home timeline did not return any posts for this prototype run.`,
s690d3047465f4117: `End of warp`,
sd65c657d6e6ac4c8: `That is the end of the loaded prototype timeline.`,
s14bec4678c4e60cc: `Restart`,
se54e9d4d0fde357e: str`Followed by`,
se6f79719051ff286: str`and`,
s540f97efd95106d7: str`and ${0} others`,
Expand Down
Loading
Loading