mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-16 12:10:28 +03:00
Fix authenticated media download (#1947)
* remove dead function * fix media download in room timeline * authenticate remaining media endpoints
This commit is contained in:
Ajay Bura
GitHub
parent
f2c31d29a2
commit
03cc25eec0
13 changed files with 284 additions and 207 deletions
|
|
@ -1,6 +1,4 @@
|
|||
import React, {
|
||||
useState, useMemo, useReducer, useEffect,
|
||||
} from 'react';
|
||||
import React, { useState, useMemo, useReducer, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './ImagePack.scss';
|
||||
|
||||
|
|
@ -19,41 +17,41 @@ import ImagePackProfile from './ImagePackProfile';
|
|||
import ImagePackItem from './ImagePackItem';
|
||||
import ImagePackUpload from './ImagePackUpload';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
|
||||
const renameImagePackItem = (shortcode) => new Promise((resolve) => {
|
||||
let isCompleted = false;
|
||||
const renameImagePackItem = (shortcode) =>
|
||||
new Promise((resolve) => {
|
||||
let isCompleted = false;
|
||||
|
||||
openReusableDialog(
|
||||
<Text variant="s1" weight="medium">Rename</Text>,
|
||||
(requestClose) => (
|
||||
<div style={{ padding: 'var(--sp-normal)' }}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const sc = e.target.shortcode.value;
|
||||
if (sc.trim() === '') return;
|
||||
isCompleted = true;
|
||||
resolve(sc.trim());
|
||||
requestClose();
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
value={shortcode}
|
||||
name="shortcode"
|
||||
label="Shortcode"
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
<div style={{ height: 'var(--sp-normal)' }} />
|
||||
<Button variant="primary" type="submit">Rename</Button>
|
||||
</form>
|
||||
</div>
|
||||
),
|
||||
() => {
|
||||
if (!isCompleted) resolve(null);
|
||||
},
|
||||
);
|
||||
});
|
||||
openReusableDialog(
|
||||
<Text variant="s1" weight="medium">
|
||||
Rename
|
||||
</Text>,
|
||||
(requestClose) => (
|
||||
<div style={{ padding: 'var(--sp-normal)' }}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const sc = e.target.shortcode.value;
|
||||
if (sc.trim() === '') return;
|
||||
isCompleted = true;
|
||||
resolve(sc.trim());
|
||||
requestClose();
|
||||
}}
|
||||
>
|
||||
<Input value={shortcode} name="shortcode" label="Shortcode" autoFocus required />
|
||||
<div style={{ height: 'var(--sp-normal)' }} />
|
||||
<Button variant="primary" type="submit">
|
||||
Rename
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
),
|
||||
() => {
|
||||
if (!isCompleted) resolve(null);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function getUsage(usage) {
|
||||
if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
|
||||
|
|
@ -79,7 +77,7 @@ function useRoomImagePack(roomId, stateKey) {
|
|||
|
||||
const pack = useMemo(() => {
|
||||
const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
|
||||
return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
|
||||
return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
|
||||
}, [room, stateKey]);
|
||||
|
||||
const sendPackContent = (content) => {
|
||||
|
|
@ -96,10 +94,13 @@ function useUserImagePack() {
|
|||
const mx = useMatrixClient();
|
||||
const pack = useMemo(() => {
|
||||
const packEvent = mx.getAccountData('im.ponies.user_emotes');
|
||||
return ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
|
||||
pack: { display_name: 'Personal' },
|
||||
images: {},
|
||||
})
|
||||
return ImagePackBuilder.parsePack(
|
||||
mx.getUserId(),
|
||||
packEvent?.getContent() ?? {
|
||||
pack: { display_name: 'Personal' },
|
||||
images: {},
|
||||
}
|
||||
);
|
||||
}, [mx]);
|
||||
|
||||
const sendPackContent = (content) => {
|
||||
|
|
@ -119,10 +120,7 @@ function useImagePackHandles(pack, sendPackContent) {
|
|||
if (typeof key !== 'string') return undefined;
|
||||
let newKey = key?.replace(/\s/g, '_');
|
||||
if (pack.getImages().get(newKey)) {
|
||||
newKey = suffixRename(
|
||||
newKey,
|
||||
(suffixedKey) => pack.getImages().get(suffixedKey),
|
||||
);
|
||||
newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
|
||||
}
|
||||
return newKey;
|
||||
};
|
||||
|
|
@ -163,7 +161,7 @@ function useImagePackHandles(pack, sendPackContent) {
|
|||
'Delete',
|
||||
`Are you sure that you want to delete "${key}"?`,
|
||||
'Delete',
|
||||
'danger',
|
||||
'danger'
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
pack.removeImage(key);
|
||||
|
|
@ -226,6 +224,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
const room = mx.getRoom(roomId);
|
||||
const [viewMore, setViewMore] = useState(false);
|
||||
const [isGlobal, setIsGlobal] = useState(isGlobalPack(mx, roomId, stateKey));
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
|
||||
|
||||
|
|
@ -253,7 +252,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
'Delete Pack',
|
||||
`Are you sure that you want to delete "${pack.displayName}"?`,
|
||||
'Delete',
|
||||
'danger',
|
||||
'danger'
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
handlePackDelete(stateKey);
|
||||
|
|
@ -264,7 +263,19 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
return (
|
||||
<div className="image-pack">
|
||||
<ImagePackProfile
|
||||
avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
|
||||
avatarUrl={
|
||||
pack.avatarUrl
|
||||
? mx.mxcUrlToHttp(
|
||||
pack.avatarUrl,
|
||||
42,
|
||||
42,
|
||||
'crop',
|
||||
undefined,
|
||||
undefined,
|
||||
useAuthentication
|
||||
)
|
||||
: null
|
||||
}
|
||||
displayName={pack.displayName ?? 'Unknown'}
|
||||
attribution={pack.attribution}
|
||||
usage={getUsage(pack.usage)}
|
||||
|
|
@ -272,10 +283,8 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
onAvatarChange={canChange ? handleAvatarChange : null}
|
||||
onEditProfile={canChange ? handleEditProfile : null}
|
||||
/>
|
||||
{ canChange && (
|
||||
<ImagePackUpload onUpload={handleAddItem} />
|
||||
)}
|
||||
{ images.length === 0 ? null : (
|
||||
{canChange && <ImagePackUpload onUpload={handleAddItem} />}
|
||||
{images.length === 0 ? null : (
|
||||
<div>
|
||||
<div className="image-pack__header">
|
||||
<Text variant="b3">Image</Text>
|
||||
|
|
@ -285,7 +294,15 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
{images.map(([shortcode, image]) => (
|
||||
<ImagePackItem
|
||||
key={shortcode}
|
||||
url={mx.mxcUrlToHttp(image.mxc)}
|
||||
url={mx.mxcUrlToHttp(
|
||||
image.mxc,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
useAuthentication
|
||||
)}
|
||||
shortcode={shortcode}
|
||||
usage={getUsage(image.usage)}
|
||||
onUsageChange={canChange ? handleUsageItem : undefined}
|
||||
|
|
@ -299,14 +316,14 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
|
|||
<div className="image-pack__footer">
|
||||
{pack.images.size > 2 && (
|
||||
<Button onClick={() => setViewMore(!viewMore)}>
|
||||
{
|
||||
viewMore
|
||||
? 'View less'
|
||||
: `View ${pack.images.size - 2} more`
|
||||
}
|
||||
{viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
|
||||
</Button>
|
||||
)}
|
||||
{handlePackDelete && (
|
||||
<Button variant="danger" onClick={handleDeletePack}>
|
||||
Delete Pack
|
||||
</Button>
|
||||
)}
|
||||
{ handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
|
||||
</div>
|
||||
)}
|
||||
<div className="image-pack__global">
|
||||
|
|
@ -332,6 +349,7 @@ ImagePack.propTypes = {
|
|||
function ImagePackUser() {
|
||||
const mx = useMatrixClient();
|
||||
const [viewMore, setViewMore] = useState(false);
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const { pack, sendPackContent } = useUserImagePack();
|
||||
|
||||
|
|
@ -350,7 +368,19 @@ function ImagePackUser() {
|
|||
return (
|
||||
<div className="image-pack">
|
||||
<ImagePackProfile
|
||||
avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
|
||||
avatarUrl={
|
||||
pack.avatarUrl
|
||||
? mx.mxcUrlToHttp(
|
||||
pack.avatarUrl,
|
||||
42,
|
||||
42,
|
||||
'crop',
|
||||
undefined,
|
||||
undefined,
|
||||
useAuthentication
|
||||
)
|
||||
: null
|
||||
}
|
||||
displayName={pack.displayName ?? 'Personal'}
|
||||
attribution={pack.attribution}
|
||||
usage={getUsage(pack.usage)}
|
||||
|
|
@ -359,7 +389,7 @@ function ImagePackUser() {
|
|||
onEditProfile={handleEditProfile}
|
||||
/>
|
||||
<ImagePackUpload onUpload={handleAddItem} />
|
||||
{ images.length === 0 ? null : (
|
||||
{images.length === 0 ? null : (
|
||||
<div>
|
||||
<div className="image-pack__header">
|
||||
<Text variant="b3">Image</Text>
|
||||
|
|
@ -369,7 +399,15 @@ function ImagePackUser() {
|
|||
{images.map(([shortcode, image]) => (
|
||||
<ImagePackItem
|
||||
key={shortcode}
|
||||
url={mx.mxcUrlToHttp(image.mxc)}
|
||||
url={mx.mxcUrlToHttp(
|
||||
image.mxc,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
useAuthentication
|
||||
)}
|
||||
shortcode={shortcode}
|
||||
usage={getUsage(image.usage)}
|
||||
onUsageChange={handleUsageItem}
|
||||
|
|
@ -379,14 +417,10 @@ function ImagePackUser() {
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
{(pack.images.size > 2) && (
|
||||
{pack.images.size > 2 && (
|
||||
<div className="image-pack__footer">
|
||||
<Button onClick={() => setViewMore(!viewMore)}>
|
||||
{
|
||||
viewMore
|
||||
? 'View less'
|
||||
: `View ${pack.images.size - 2} more`
|
||||
}
|
||||
{viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -435,29 +469,33 @@ function ImagePackGlobal() {
|
|||
<div className="image-pack-global">
|
||||
<MenuHeader>Global packs</MenuHeader>
|
||||
<div>
|
||||
{
|
||||
roomIdToStateKeys.size > 0
|
||||
? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
|
||||
const room = mx.getRoom(roomId);
|
||||
{roomIdToStateKeys.size > 0 ? (
|
||||
[...roomIdToStateKeys].map(([roomId, stateKeys]) => {
|
||||
const room = mx.getRoom(roomId);
|
||||
return stateKeys.map((stateKey) => {
|
||||
const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
|
||||
const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
|
||||
if (!pack) return null;
|
||||
return (
|
||||
stateKeys.map((stateKey) => {
|
||||
const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
|
||||
const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
|
||||
if (!pack) return null;
|
||||
return (
|
||||
<div className="image-pack__global" key={pack.id}>
|
||||
<Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
|
||||
<div>
|
||||
<Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
|
||||
<Text variant="b3">{room.name}</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
<div className="image-pack__global" key={pack.id}>
|
||||
<Checkbox
|
||||
variant="positive"
|
||||
onToggle={() => handleChange(roomId, stateKey)}
|
||||
isActive
|
||||
/>
|
||||
<div>
|
||||
<Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
|
||||
<Text variant="b3">{room.name}</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: <div className="image-pack-global__empty"><Text>No global packs</Text></div>
|
||||
}
|
||||
});
|
||||
})
|
||||
) : (
|
||||
<div className="image-pack-global__empty">
|
||||
<Text>No global packs</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue