Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: preferLargeMedia config

Browse Source
This commit is contained in:
Kieran
2023-12-14 12:05:26 +00:00
parent 6e5fba4f15
commit 9e65024652
5 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/config/default.json
View File

@ -11,7 +11,6 @@
"httpCache": "", "httpCache": "",
"animalNamePlaceholders": false, "animalNamePlaceholders": false,
"defaultZapPoolFee": 1, "defaultZapPoolFee": 1,
"bypassImgProxyError": false,
"features": { "features": {
"analytics": true, "analytics": true,
"subscriptions": true, "subscriptions": true,
@ -24,6 +23,10 @@
"defaultPreferences": { "defaultPreferences": {
"checkSigs": true "checkSigs": true
}, },
"media": {
"bypassImgProxyError": false,
"preferLargeMedia": true
},
"noteCreatorToast": true, "noteCreatorToast": true,
"hideFromNavbar": ["/graph"], "hideFromNavbar": ["/graph"],
"deckSubKind": 1, "deckSubKind": 1,

5
packages/app/config/iris.json
View File

@ -11,7 +11,6 @@
"httpCache": "", "httpCache": "",
"animalNamePlaceholders": true, "animalNamePlaceholders": true,
"defaultZapPoolFee": 0.5, "defaultZapPoolFee": 0.5,
"bypassImgProxyError": true,
"features": { "features": {
"analytics": true, "analytics": true,
"subscriptions": false, "subscriptions": false,
@ -24,6 +23,10 @@
"defaultPreferences": { "defaultPreferences": {
"checkSigs": true "checkSigs": true
}, },
"media": {
"bypassImgProxyError": true,
"preferLargeMedia": true
},
"hideFromNavbar": [], "hideFromNavbar": [],
"eventLinkPrefix": "note", "eventLinkPrefix": "note",
"profileLinkPrefix": "npub", "profileLinkPrefix": "npub",

5
packages/app/custom.d.ts vendored
View File

@ -52,7 +52,6 @@ declare const CONFIG: {
httpCache: string; httpCache: string;
animalNamePlaceholders: boolean; animalNamePlaceholders: boolean;
defaultZapPoolFee: number; defaultZapPoolFee: number;
bypassImgProxyError: boolean;
features: { features: {
analytics: boolean; analytics: boolean;
subscriptions: boolean; subscriptions: boolean;
@ -65,6 +64,10 @@ declare const CONFIG: {
signUp: { signUp: {
moderation: boolean; moderation: boolean;
}; };
media: {
bypassImgProxyError: boolean;
preferLargeMedia: boolean;
};
// Filter urls from nav sidebar // Filter urls from nav sidebar
hideFromNavbar: Array<string>; hideFromNavbar: Array<string>;
// Limit deck to certain subscriber tier // Limit deck to certain subscriber tier

14
packages/app/src/Element/Embed/MediaElement.tsx
View File

@ -37,20 +37,20 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
const style = {} as CSSProperties; const style = {} as CSSProperties;
if (meta?.height && meta.width && imageRef.current) { if (meta?.height && meta.width && imageRef.current) {
const scale = imageRef.current.offsetWidth / meta.width; const scale = imageRef.current.offsetWidth / meta.width;
style.height = `${meta.height * scale}px`; style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`;
} }
return style; return style;
}, [imageRef.current]); }, [imageRef.current, meta]);
return ( return (
<div className={classNames("flex items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !meta })}> <div className={classNames("flex items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !meta && !CONFIG.media.preferLargeMedia })}>
<ProxyImg <ProxyImg
key={url} key={url}
src={url} src={url}
sha256={meta?.sha256} sha256={meta?.sha256}
onClick={onMediaClick} onClick={onMediaClick}
className={classNames("max-h-[80vh] w-full h-full object-contain object-center md:object-left", { className={classNames("max-h-[80vh] w-full h-full object-contain object-center", {
"md:max-h-[510px]": !meta, "md:max-h-[510px]": !meta && !CONFIG.media.preferLargeMedia,
})} })}
style={style} style={style}
ref={imageRef} ref={imageRef}
@ -77,7 +77,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
}, [inView]); }, [inView]);
return ( return (
<div ref={videoContainerRef} className="flex justify-center items-center -mx-4 md:mx-0 md:h-[510px] my-2"> <div ref={videoContainerRef} className={classNames("flex justify-center items-center -mx-4 md:mx-0 my-2", { "md:h-[510px]": !CONFIG.media.preferLargeMedia })}>
<video <video
ref={videoRef} ref={videoRef}
loop={true} loop={true}
@ -85,7 +85,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
src={url} src={url}
controls controls
poster={proxy(url)} poster={proxy(url)}
className="max-h-[80vh] md:max-h-[510px]" className={classNames("max-h-[80vh]", { "md:max-h-[510px]": !CONFIG.media.preferLargeMedia })}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
/> />
</div> </div>

2
packages/app/src/Element/ProxyImg.tsx
View File

@ -15,7 +15,7 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(
({ size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps, ref) => { ({ size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps, ref) => {
const { proxy } = useImgProxy(); const { proxy } = useImgProxy();
const [loadFailed, setLoadFailed] = useState(false); const [loadFailed, setLoadFailed] = useState(false);
const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError); const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) { if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
return ( return (