Skip to content
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.

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

chore(wasm): updates wasm + group icon #868

Merged
merged 12 commits into from
Nov 27, 2024
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,6 @@
"uuid": "^9.0.1",
"vite-plugin-node-polyfills": "^0.21.0",
"voice-activity-detection": "^0.0.5",
"warp-wasm": "1.5.1"
"warp-wasm": "1.6.2"
}
}
38 changes: 28 additions & 10 deletions src/lib/components/group/GroupSettings.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@

let unsavedChanges = false
let shakeSaveControls = false
let groupPicture = ""
let user = get(Store.state.user)

$: isAdmin = $groupChatToBeChanged.creator !== undefined ? $groupChatToBeChanged.creator === user.key : false
$: canAdd = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.AddParticipants)
$: canRename = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.SetGroupName)
$: canRemove = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.RemoveParticipants)
$: canRename = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupInfo)
$: canChangePic = isAdmin || $groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupImages)

$: users = Store.getUsersLookup(activeChat.users)

Expand Down Expand Up @@ -74,6 +75,9 @@
if (propertiesChangedList.membersPermission) {
RaygunStoreInstance.setGroupPermissions($groupChatToBeChanged.id, $groupChatToBeChanged.settings.permissions)
}
if (propertiesChangedList.pictureChanged && $groupChatToBeChanged.icon) {
RaygunStoreInstance.updateConversationPicture($groupChatToBeChanged.id, $groupChatToBeChanged.icon)
}
propertiesChangedList = {
groupName: false,
description: false,
Expand Down Expand Up @@ -132,14 +136,13 @@
<div class="settings" data-cy="group-settings">
<Label hook="group-settings-change-photo-label" text={$_("chat.group.settings.photo")} />
<div class="profile-picture-container">
<ProfilePicture hook="group-settings-profile-picture" noIndicator image={groupPicture} size={Size.Large} />
<ProfilePicture hook="group-settings-profile-picture" noIndicator image={$groupChatToBeChanged.icon || ""} size={Size.Large} />
<FileUploadButton
icon
disabled={!isAdmin}
disabled={!canChangePic}
tooltip={$_("chat.group.settings.photo")}
on:upload={async picture => {
/// TODO(Lucas): It is not implemented in warp yet
groupPicture = picture.detail
$groupChatToBeChanged.icon = picture.detail
propertiesChangedList.pictureChanged = true
}} />
</div>
Expand Down Expand Up @@ -202,7 +205,7 @@
<Text size={Size.Smaller}>{$_("chat.group.kick")}</Text>
<Text muted size={Size.Smallest}>{$_("chat.group.kick.description")}</Text>
</div>
<Button disabled={!isAdmin} appearance={Appearance.Error} on:click={remove_member}>
<Button disabled={!canRemove} appearance={Appearance.Error} on:click={remove_member}>
<Text size={Size.Smallest}>{$_("chat.group.kick")}</Text>
</Button>
</div>
Expand All @@ -219,17 +222,32 @@
togglePermission(GroupPermission.AddParticipants)
}} />
</SettingSection>
<SettingSection small hook="settings-section-remove-members" name={$_("chat.group.settings.remove")} description={$_("chat.group.settings.remove.description")}>
<Switch
small
hook="switch-add-members"
on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.RemoveParticipants)}
on:toggle={_ => {
togglePermission(GroupPermission.RemoveParticipants)
}} />
</SettingSection>
<SettingSection small hook="settings-section-change-details" name={$_("chat.group.settings.details")} description={$_("chat.group.settings.details.description")}>
<Switch
small
hook="switch-change-details"
on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.SetGroupName)}
on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupInfo)}
on:toggle={_ => {
togglePermission(GroupPermission.SetGroupName)
togglePermission(GroupPermission.EditGroupInfo)
}} />
</SettingSection>
<SettingSection small hook="settings-section-change-photo" name={$_("chat.group.settings.photo")} description={$_("chat.group.settings.photo.description")}>
<Switch small hook="switch-change-photo" on={false} disabled={true} on:toggle={_ => {}} />
<Switch
small
hook="switch-change-photo"
on={$groupChatToBeChanged.settings.permissions[user.key]?.includes(GroupPermission.EditGroupImages)}
on:toggle={_ => {
togglePermission(GroupPermission.EditGroupImages)
}} />
</SettingSection>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export { default as ChatPreview } from "$lib/components/messaging/ChatPreview.sv
export { default as CoinBalance } from "$lib/components/CoinBalance.svelte"
export { default as ColorSwatch } from "$lib/components/ui/ColorSwatch.svelte"
export { default as Container } from "$lib/components/ui/Container.svelte"
export { default as ChatIcon } from "$lib/components/ui/ChatIcon.svelte"
export { default as Conversation } from "$lib/components/messaging/Conversation.svelte"
export { default as Key } from "$lib/components/settings/Key.svelte"
export { default as Meter } from "$lib/components/settings/Meter.svelte"
Expand Down
16 changes: 2 additions & 14 deletions src/lib/components/messaging/ChatPreview.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Appearance, ChatType, PaymentRequestsEnum, Route, Shape, Size, Status } from "$lib/enums"
import type { Chat } from "$lib/types"
import { Text, Loader, Button, Icon } from "$lib/elements"
import { ProfilePicture } from "$lib/components"
import { ChatIcon, ProfilePicture } from "$lib/components"
import { createEventDispatcher, onMount } from "svelte"
import ProfilePictureMany from "../profile/ProfilePictureMany.svelte"
import { Store } from "$lib/state/Store"
Expand Down Expand Up @@ -129,19 +129,7 @@
}
goto(Route.Chat)
}}>
{#if chat.kind === ChatType.DirectMessage}
<ProfilePicture
hook="chat-preview-picture"
id={$users[1].key}
typing={chat.typing_indicator.size > 0 && chat.typing_indicator.users()[0] === $users[1].key}
image={directChatPhoto}
status={chatStatus}
size={Size.Medium}
loading={loading}
frame={$users[1].profile.photo.frame} />
{:else}
<ProfilePictureMany users={$users} />
{/if}
<ChatIcon chat={chat} profileHook={"chat-preview-picture"} loading={loading} />
<div class="content">
<div class="heading">
<Text hook="chat-preview-name" class="chat-user min-text" singleLine loading={loading}>
Expand Down
14 changes: 2 additions & 12 deletions src/lib/components/ui/ChatFilter.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import { RaygunStoreInstance } from "$lib/wasm/RaygunStore"
import { goto } from "$app/navigation"
import StoreResolver from "../utils/StoreResolver.svelte"
import ChatIcon from "./ChatIcon.svelte"

export let filter: string

Expand Down Expand Up @@ -109,18 +110,7 @@
<div class="searchbar-entry searchbar-entry-group">
<div class="group" role="none" on:click={() => select_chat(chat, undefined)}>
<div class="profile-picture-wrap">
{#if chat.users.length === 2}
<ProfilePicture
typing={chat.typing_indicator.size > 0}
image={$userCache[chat.users[0]].profile.photo.image}
status={$userCache[chat.users[0]].profile.status}
size={Size.Medium}
loading={loading}
id={$userCache[chat.users[0]].key}
frame={$userCache[chat.users[0]].profile.photo.frame} />
{:else}
<ProfilePictureMany users={chat.users.map(u => $userCache[u])} />
{/if}
<ChatIcon chat={chat} profileHook={"chat-filter-picture"} loading={loading} />
</div>
{#if name.startsWith(filter.toLocaleLowerCase())}
<span class="entry-title">
Expand Down
32 changes: 32 additions & 0 deletions src/lib/components/ui/ChatIcon.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<script lang="ts">
import { ChatType, Size } from "$lib/enums"
import type { Chat } from "$lib/types"
import { ProfilePicture, ProfilePictureMany } from "$lib/components"
import { Store } from "$lib/state/Store"

export let chat: Chat
export let loading: boolean = false
export let profileHook: string = ""
export let size: Size = Size.Medium
export let noIndicator: boolean = false
export let forceSize: boolean = false

$: users = Store.getUsersLookup(chat.users)
</script>

{#if chat.icon}
<ProfilePicture hook={profileHook} typing={chat.typing_indicator.size > 0} image={chat.icon} size={Size.Medium} loading={loading} />
{:else if chat.kind === ChatType.DirectMessage}
<ProfilePicture
hook={profileHook}
typing={chat.typing_indicator.size > 0}
id={$users[chat.users[1]]?.key}
image={$users[chat.users[1]]?.profile.photo.image}
frame={$users[chat.users[1]]?.profile.photo.frame}
status={$users[chat.users[1]]?.profile.status}
size={size}
noIndicator={noIndicator}
loading={loading} />
{:else}
<ProfilePictureMany users={Object.values($users)} size={size} forceSize={forceSize} on:click />
{/if}
2 changes: 2 additions & 0 deletions src/lib/lang/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@
"description.placeholder": "Group description goes here",
"add": "Add Members",
"add.description": "Allows user to add members to the group",
"remove": "Remove Members",
"remove.description": "Allows user to add remove from the group",
"edit": "Edit Members",
"details": "Change Details",
"details.description": "Allows user to change the name and MOTD of the group",
Expand Down
8 changes: 2 additions & 6 deletions src/lib/layouts/Slimbar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { slide } from "svelte/transition"
import { animationDuration } from "$lib/globals/animations"
import { Store } from "$lib/state/Store"
import { ProfilePicture, ProfilePictureMany } from "$lib/components"
import { ChatIcon, ProfilePicture, ProfilePictureMany } from "$lib/components"
import { Label } from "$lib/elements"
import { goto } from "$app/navigation"
import CommunityIcon from "$lib/components/community/icon/CommunityIcon.svelte"
Expand Down Expand Up @@ -66,11 +66,7 @@
}
goto(Route.Chat)
}}>
{#if favorite.kind === ChatType.DirectMessage}
<ProfilePicture hook="favorite-profile-picture" id={resolved[1]?.key} typing={favorite.typing_indicator.size > 0} image={resolved[1]?.profile.photo.image} status={resolved[1].profile.status} size={Size.Medium} />
{:else}
<ProfilePictureMany users={resolved} />
{/if}
<ChatIcon chat={favorite} profileHook={"favorite-profile-picture"} />
</div>
</StoreResolver>
{/each}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,8 @@ export type Chat = {
last_message_id: string
last_message_at: Date
last_message_preview: string
icon?: string
banner?: string
}

const typingDuration = 5
Expand Down
14 changes: 11 additions & 3 deletions src/lib/wasm/ConstellationStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -319,9 +319,17 @@ class ConstellationStore {
}
}

export function imageFromData(data: any[], prefix: string, kind: string) {
let hrefData = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ""))
return `data:${prefix}/${kind};base64, ${hrefData}`
export function imageFromData(data: Uint8Array, file_type: wasm.FileType) {
let mime = "application/octet-stream"
if (file_type !== "Generic") {
mime = file_type.Mime
}
return imageFromMime(data, mime)
}

export function imageFromMime(data: Uint8Array, mime: string) {
let hrefData = btoa(data.reduce((data, byte) => data + String.fromCharCode(byte), ""))
return `data:${mime};base64, ${hrefData}`
}

export const ConstellationStoreInstance = new ConstellationStore(WarpStore.warp.constellation)
Loading
Loading