chore(license): relicense artwork and move non-free media out (#3173)

fluxer_app/src/features/accessibility/components/NekoSprite.tsx

@@ -1,4 +1,5 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
+// SPDX-License-Identifier: AGPL-3.0-or-later AND MIT
+// SPDX-FileCopyrightText: 2022 adryd
 
 import styles from '@app/features/accessibility/components/NekoSprite.module.css';
 import Accessibility from '@app/features/accessibility/state/Accessibility';

fluxer_app/src/features/app/config/HostedMedia.ts

@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function hostedImageUrl(name: string): string {
+	return `https://fluxer.app/static/img/${name}`;
+}

fluxer_app/src/features/moderation/components/modals/BanMemberModal.module.css

@@ -7,9 +7,13 @@
 }
 
 .video {
+	display: block;
 	width: 100%;
 	max-width: 25rem;
+	height: auto;
+	aspect-ratio: 2 / 1;
 	margin-bottom: 1rem;
+	object-fit: cover;
 }
 
 .sectionTitle {

fluxer_app/src/features/moderation/components/modals/BanMemberModal.tsx

@@ -4,6 +4,7 @@ import Accessibility from '@app/features/accessibility/state/Accessibility';
 import * as Modal from '@app/features/app/components/dialogs/Modal';
 import {useAnimatedMediaVideoPlayback} from '@app/features/app/hooks/useAnimatedMediaPlayback';
 import {useSaveData} from '@app/features/app/hooks/useSaveData';
+import RuntimeConfig from '@app/features/app/state/RuntimeConfig';
 import * as GuildCommands from '@app/features/guild/commands/GuildCommands';
 import {
 	CUSTOM_ELLIPSIS_DESCRIPTOR,
@@ -16,6 +17,7 @@ import {
 import {showModerationErrorModal} from '@app/features/moderation/components/alerts/ModerationErrorModalUtils';
 import styles from '@app/features/moderation/components/modals/BanMemberModal.module.css';
 import {BAN_DELETE_MESSAGE_OPTIONS} from '@app/features/moderation/constants/BanDeleteMessageOptions';
+import {BANNED_MP4, BANNED_POSTER, BANNED_WEBM} from '@app/features/moderation/constants/BanModalMedia';
 import {Logger} from '@app/features/platform/utils/AppLogger';
 import {Button} from '@app/features/ui/button/Button';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
@@ -25,9 +27,6 @@ import {Input} from '@app/features/ui/components/form/FormInput';
 import {RadioGroup} from '@app/features/ui/radio_group/RadioGroup';
 import type {User} from '@app/features/user/models/User';
 import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
-import bannedMp4 from '@app/media/videos/banned.mp4';
-import bannedWebm from '@app/media/videos/banned.webm';
-import bannedPoster from '@app/media/videos/banned.webp';
 import {MAX_TEMP_BAN_DURATION_SECONDS, MIN_TEMP_BAN_DURATION_SECONDS} from '@fluxer/constants/src/LimitConstants';
 import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
@@ -101,7 +100,8 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
 	const {i18n} = useLingui();
 	const videoRef = useRef<HTMLVideoElement>(null);
 	const dataSaverOn = useSaveData();
-	const motionArtworkAllowed = !Accessibility.useReducedMotion && !dataSaverOn;
+	const showArtwork = !RuntimeConfig.isSelfHosted();
+	const motionArtworkAllowed = showArtwork && !Accessibility.useReducedMotion && !dataSaverOn;
 	const videoPlaybackAllowed = useAnimatedMediaVideoPlayback(videoRef, {enabled: motionArtworkAllowed});
 	const [reason, setReason] = useState('');
 	const [deleteMessageSeconds, setDeleteMessageSeconds] = useState<number>(60 * 60 * 24);
@@ -160,22 +160,26 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
 							loop
 							muted
 							playsInline
-							poster={bannedPoster}
+							poster={BANNED_POSTER}
+							width={480}
+							height={240}
 							className={styles.video}
 							data-flx="moderation.ban-member-modal.video"
 						>
-							<source src={bannedWebm} type="video/webm" data-flx="moderation.ban-member-modal.source.video-webm" />
-							<source src={bannedMp4} type="video/mp4" data-flx="moderation.ban-member-modal.source.video-mp4" />
+							<source src={BANNED_WEBM} type="video/webm" data-flx="moderation.ban-member-modal.source.video-webm" />
+							<source src={BANNED_MP4} type="video/mp4" data-flx="moderation.ban-member-modal.source.video-mp4" />
 						</video>
-					) : (
+					) : showArtwork ? (
 						<img
-							src={bannedPoster}
+							src={BANNED_POSTER}
 							alt=""
+							width={480}
+							height={240}
 							aria-hidden={true}
 							className={styles.video}
 							data-flx="moderation.ban-member-modal.video-still"
 						/>
-					)}
+					) : null}
 					<div data-flx="moderation.ban-member-modal.div">
 						<FormCombobox<number>
 							label={i18n._(BAN_DURATION_DESCRIPTOR)}

fluxer_app/src/features/moderation/constants/BanModalMedia.ts

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import {hostedImageUrl} from '@app/features/app/config/HostedMedia';
+
+export const BANNED_MP4 = hostedImageUrl('app-banned.57f4a7f02835e746.mp4');
+export const BANNED_WEBM = hostedImageUrl('app-banned.7b2a4c17603fbe1c.webm');
+export const BANNED_POSTER = hostedImageUrl('app-banned.da3d66d03a7c4962.webp');

fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.module.css

@@ -778,6 +778,11 @@
 	.perkRowFlipped {
 		grid-template-columns: 5fr 7fr;
 	}
+
+	.perkRowTextOnly {
+		grid-template-columns: minmax(0, 1fr);
+		padding-block: 2.5rem;
+	}
 }
 
 .perkArtColumn {

fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPage.tsx

@@ -30,6 +30,7 @@ import {
 	resolveUploadSizes,
 } from '@app/features/premium/components/plutonium_page/PlutoniumPageComparison';
 import {PlutoniumPageIcon} from '@app/features/premium/components/plutonium_page/PlutoniumPageIcons';
+import {CROWN_AVIF, CROWN_WEBP} from '@app/features/premium/components/plutonium_page/PlutoniumPageMedia';
 import {
 	BACK_DESCRIPTOR,
 	CLOSING_BODY_DESCRIPTOR,
@@ -74,8 +75,6 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing';
 import MobileLayout from '@app/features/ui/state/MobileLayout';
 import Users from '@app/features/user/state/Users';
 import * as LocaleUtils from '@app/features/user/utils/LocaleUtils';
-import crownAvif from '@app/media/images/plutonium/plutonium-crown.avif';
-import crownWebp from '@app/media/images/plutonium/plutonium-crown.webp';
 import {GuildFeatures} from '@fluxer/constants/src/GuildConstants';
 import {getFormattedLongDate} from '@fluxer/date_utils/src/DateFormatting';
 import {Trans, useLingui} from '@lingui/react/macro';
@@ -451,22 +450,24 @@ export const PlutoniumPage = observer(function PlutoniumPage() {
 				)}
 				<section className={styles.hero} data-flx="premium.plutonium-page.hero">
 					<div className={styles.heroInner}>
-						<div className={styles.crownWrap}>
-							<picture>
-								<source type="image/avif" srcSet={crownAvif} />
-								<img
-									draggable={false}
-									className={styles.crown}
-									src={crownWebp}
-									width={480}
-									height={395}
-									alt=""
-									decoding="sync"
-									fetchPriority="high"
-									data-flx="premium.plutonium-page.hero.crown"
-								/>
-							</picture>
-						</div>
+						{!RuntimeConfig.isSelfHosted() && (
+							<div className={styles.crownWrap}>
+								<picture>
+									<source type="image/avif" srcSet={CROWN_AVIF} />
+									<img
+										draggable={false}
+										className={styles.crown}
+										src={CROWN_WEBP}
+										width={480}
+										height={395}
+										alt=""
+										decoding="sync"
+										fetchPriority="high"
+										data-flx="premium.plutonium-page.hero.crown"
+									/>
+								</picture>
+							</div>
+						)}
 						<h1 className={styles.displayHeading} data-flx="premium.plutonium-page.hero.title">
 							{PREMIUM_PRODUCT_FULL_NAME}
 						</h1>

fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPageMedia.ts

@@ -0,0 +1,79 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import {hostedImageUrl} from '@app/features/app/config/HostedMedia';
+
+export const CROWN_AVIF = hostedImageUrl('perks-plutonium-crown.4d0b72644330bf10.avif');
+export const CROWN_WEBP = hostedImageUrl('perks-plutonium-crown.3265aa6b4147b19b.webp');
+
+export const AVATAR_LSF = hostedImageUrl('perks-avatar-lsf.0800cc17b7d31b5e.webp');
+export const BANNER_LSF = hostedImageUrl('perks-banner-lsf.05f2565afc72a167.webp');
+export const EMOJI_CATVIBE = hostedImageUrl('perks-emoji-catvibe.28e83552cc9a26c2.webp');
+export const EMOJI_CATWAVE = hostedImageUrl('perks-emoji-catwave.663abebab1c327fb.webp');
+export const STICKER_FEEL_THAT = hostedImageUrl('perks-sticker-feel-that.3eae385d2d9cc99a.webp');
+
+type ShotSet = [string, string, string];
+
+export interface ShotFamily {
+	avif: ShotSet;
+	webp: ShotSet;
+}
+
+function hostedShotSet([small, medium, large]: ShotSet): ShotSet {
+	return [hostedImageUrl(small), hostedImageUrl(medium), hostedImageUrl(large)];
+}
+
+function shotFamily(avif: ShotSet, webp: ShotSet): ShotFamily {
+	return {avif: hostedShotSet(avif), webp: hostedShotSet(webp)};
+}
+
+export const EXPRESSIONS_SHOTS = shotFamily(
+	[
+		'screenshots-feature-perk-expressions-640w.481d53f29ebbe154.avif',
+		'screenshots-feature-perk-expressions-1120w.609f056dd55a176f.avif',
+		'screenshots-feature-perk-expressions-1600w.35a92d3fc43fa858.avif',
+	],
+	[
+		'screenshots-feature-perk-expressions-640w.74bde0805e3452eb.webp',
+		'screenshots-feature-perk-expressions-1120w.f52ad1f714185faa.webp',
+		'screenshots-feature-perk-expressions-1600w.192c0d18c4a3d705.webp',
+	],
+);
+
+export const PROFILE_SHOTS = shotFamily(
+	[
+		'screenshots-feature-perk-profile-640w.0df90fc828ae1bb4.avif',
+		'screenshots-feature-perk-profile-1120w.ca5e8d03c4f7eac7.avif',
+		'screenshots-feature-perk-profile-1600w.c790612e9d3295f7.avif',
+	],
+	[
+		'screenshots-feature-perk-profile-640w.76efd2d804dc3c32.webp',
+		'screenshots-feature-perk-profile-1120w.799d04fb886684b2.webp',
+		'screenshots-feature-perk-profile-1600w.7459898617b3aa74.webp',
+	],
+);
+
+export const STREAM_SHOTS = shotFamily(
+	[
+		'screenshots-feature-perk-stream-640w.d0567b22ca4d9910.avif',
+		'screenshots-feature-perk-stream-1120w.07ea4f292b8953a5.avif',
+		'screenshots-feature-perk-stream-1600w.c9697ce430b0773e.avif',
+	],
+	[
+		'screenshots-feature-perk-stream-640w.2848435d90d0afa5.webp',
+		'screenshots-feature-perk-stream-1120w.a2076637a71b99bd.webp',
+		'screenshots-feature-perk-stream-1600w.745d8f0f60d30672.webp',
+	],
+);
+
+export const UPLOAD_SHOTS = shotFamily(
+	[
+		'screenshots-feature-perk-upload-640w.455d1bdceab21b42.avif',
+		'screenshots-feature-perk-upload-1120w.392656a9b0f21585.avif',
+		'screenshots-feature-perk-upload-1600w.1aa744f6f0122c3f.avif',
+	],
+	[
+		'screenshots-feature-perk-upload-640w.5b80c11e2a6dfe63.webp',
+		'screenshots-feature-perk-upload-1120w.156d068948c832fb.webp',
+		'screenshots-feature-perk-upload-1600w.bc3223b318081269.webp',
+	],
+);

fluxer_app/src/features/premium/components/plutonium_page/PlutoniumPageShowcase.tsx

@@ -1,6 +1,19 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import RuntimeConfig from '@app/features/app/state/RuntimeConfig';
 import styles from '@app/features/premium/components/plutonium_page/PlutoniumPage.module.css';
+import {
+	AVATAR_LSF,
+	BANNER_LSF,
+	EMOJI_CATVIBE,
+	EMOJI_CATWAVE,
+	EXPRESSIONS_SHOTS,
+	PROFILE_SHOTS,
+	type ShotFamily,
+	STICKER_FEEL_THAT,
+	STREAM_SHOTS,
+	UPLOAD_SHOTS,
+} from '@app/features/premium/components/plutonium_page/PlutoniumPageMedia';
 import {
 	SHOWCASE_EXPRESSIONS_BODY_DESCRIPTOR,
 	SHOWCASE_EXPRESSIONS_TITLE_DESCRIPTOR,
@@ -13,35 +26,6 @@ import {
 	TAG_FOOTNOTE_MARKER_DESCRIPTOR,
 } from '@app/features/premium/components/plutonium_page/PlutoniumPageMessages';
 import FocusRing from '@app/features/ui/focus_ring/FocusRing';
-import avatarLsf from '@app/media/images/plutonium/avatar-lsf.webp';
-import bannerLsf from '@app/media/images/plutonium/banner-lsf.webp';
-import emojiCatvibe from '@app/media/images/plutonium/emoji-catvibe.webp';
-import emojiCatwave from '@app/media/images/plutonium/emoji-catwave.webp';
-import expressions640Avif from '@app/media/images/plutonium/feature-perk-expressions-640w.avif';
-import expressions640Webp from '@app/media/images/plutonium/feature-perk-expressions-640w.webp';
-import expressions1120Avif from '@app/media/images/plutonium/feature-perk-expressions-1120w.avif';
-import expressions1120Webp from '@app/media/images/plutonium/feature-perk-expressions-1120w.webp';
-import expressions1600Avif from '@app/media/images/plutonium/feature-perk-expressions-1600w.avif';
-import expressions1600Webp from '@app/media/images/plutonium/feature-perk-expressions-1600w.webp';
-import profile640Avif from '@app/media/images/plutonium/feature-perk-profile-640w.avif';
-import profile640Webp from '@app/media/images/plutonium/feature-perk-profile-640w.webp';
-import profile1120Avif from '@app/media/images/plutonium/feature-perk-profile-1120w.avif';
-import profile1120Webp from '@app/media/images/plutonium/feature-perk-profile-1120w.webp';
-import profile1600Avif from '@app/media/images/plutonium/feature-perk-profile-1600w.avif';
-import profile1600Webp from '@app/media/images/plutonium/feature-perk-profile-1600w.webp';
-import stream640Avif from '@app/media/images/plutonium/feature-perk-stream-640w.avif';
-import stream640Webp from '@app/media/images/plutonium/feature-perk-stream-640w.webp';
-import stream1120Avif from '@app/media/images/plutonium/feature-perk-stream-1120w.avif';
-import stream1120Webp from '@app/media/images/plutonium/feature-perk-stream-1120w.webp';
-import stream1600Avif from '@app/media/images/plutonium/feature-perk-stream-1600w.avif';
-import stream1600Webp from '@app/media/images/plutonium/feature-perk-stream-1600w.webp';
-import upload640Avif from '@app/media/images/plutonium/feature-perk-upload-640w.avif';
-import upload640Webp from '@app/media/images/plutonium/feature-perk-upload-640w.webp';
-import upload1120Avif from '@app/media/images/plutonium/feature-perk-upload-1120w.avif';
-import upload1120Webp from '@app/media/images/plutonium/feature-perk-upload-1120w.webp';
-import upload1600Avif from '@app/media/images/plutonium/feature-perk-upload-1600w.avif';
-import upload1600Webp from '@app/media/images/plutonium/feature-perk-upload-1600w.webp';
-import stickerFeelThat from '@app/media/images/plutonium/sticker-feel-that.webp';
 import type {MessageDescriptor} from '@lingui/core';
 import {useLingui} from '@lingui/react/macro';
 import {clsx} from 'clsx';
@@ -50,11 +34,6 @@ import type React from 'react';
 const PERK_SHOT_SIZES = '(min-width: 48rem) 50vw, calc(100vw - 5rem)';
 const CHAT_SURFACE = 'rgb(30, 29, 35)';
 
-interface ShotFamily {
-	avif: [string, string, string];
-	webp: [string, string, string];
-}
-
 interface PerkOverlay {
 	src: string;
 	left: number;
@@ -78,9 +57,9 @@ interface PerkCard {
 const SHOT_WIDTHS = [640, 1120, 1600] as const;
 
 const EXPRESSIONS_OVERLAYS: ReadonlyArray<PerkOverlay> = [
-	{src: emojiCatvibe, left: 65.22, top: 11.241, width: 4.372, height: 5.128, backdrop: CHAT_SURFACE},
-	{src: emojiCatwave, left: 14.936, top: 31.197, width: 8.743, height: 10.256, backdrop: CHAT_SURFACE},
-	{src: stickerFeelThat, left: 14.936, top: 52.35, width: 29.144, height: 34.188},
+	{src: EMOJI_CATVIBE, left: 65.22, top: 11.241, width: 4.372, height: 5.128, backdrop: CHAT_SURFACE},
+	{src: EMOJI_CATWAVE, left: 14.936, top: 31.197, width: 8.743, height: 10.256, backdrop: CHAT_SURFACE},
+	{src: STICKER_FEEL_THAT, left: 14.936, top: 52.35, width: 29.144, height: 34.188},
 ];
 
 const PERK_CARDS: ReadonlyArray<PerkCard> = [
@@ -88,10 +67,7 @@ const PERK_CARDS: ReadonlyArray<PerkCard> = [
 		id: 'expressions',
 		title: SHOWCASE_EXPRESSIONS_TITLE_DESCRIPTOR,
 		body: SHOWCASE_EXPRESSIONS_BODY_DESCRIPTOR,
-		shots: {
-			avif: [expressions640Avif, expressions1120Avif, expressions1600Avif],
-			webp: [expressions640Webp, expressions1120Webp, expressions1600Webp],
-		},
+		shots: EXPRESSIONS_SHOTS,
 		width: 549,
 		height: 468,
 		overlays: EXPRESSIONS_OVERLAYS,
@@ -100,10 +76,7 @@ const PERK_CARDS: ReadonlyArray<PerkCard> = [
 		id: 'profile',
 		title: SHOWCASE_PROFILE_TITLE_DESCRIPTOR,
 		body: SHOWCASE_PROFILE_BODY_DESCRIPTOR,
-		shots: {
-			avif: [profile640Avif, profile1120Avif, profile1600Avif],
-			webp: [profile640Webp, profile1120Webp, profile1600Webp],
-		},
+		shots: PROFILE_SHOTS,
 		width: 662,
 		height: 407,
 		overlays: [],
@@ -113,10 +86,7 @@ const PERK_CARDS: ReadonlyArray<PerkCard> = [
 		id: 'stream',
 		title: SHOWCASE_STREAM_TITLE_DESCRIPTOR,
 		body: SHOWCASE_STREAM_BODY_DESCRIPTOR,
-		shots: {
-			avif: [stream640Avif, stream1120Avif, stream1600Avif],
-			webp: [stream640Webp, stream1120Webp, stream1600Webp],
-		},
+		shots: STREAM_SHOTS,
 		width: 588,
 		height: 343,
 		overlays: [],
@@ -125,10 +95,7 @@ const PERK_CARDS: ReadonlyArray<PerkCard> = [
 		id: 'upload',
 		title: SHOWCASE_UPLOAD_TITLE_DESCRIPTOR,
 		body: SHOWCASE_UPLOAD_BODY_DESCRIPTOR,
-		shots: {
-			avif: [upload640Avif, upload1120Avif, upload1600Avif],
-			webp: [upload640Webp, upload1120Webp, upload1600Webp],
-		},
+		shots: UPLOAD_SHOTS,
 		width: 549,
 		height: 362,
 		overlays: [],
@@ -161,7 +128,7 @@ function ProfileOverlay() {
 			<g clipPath="url(#plutonium-perk-banner-clip)">
 				<g mask="url(#plutonium-perk-banner-bite)">
 					<image
-						href={bannerLsf}
+						href={BANNER_LSF}
 						x="345.333"
 						y="16.333"
 						width="300.333"
@@ -172,7 +139,7 @@ function ProfileOverlay() {
 				<circle cx="398.333" cy="114.333" r="41.6" fill="none" stroke="#0c0b0e" strokeWidth="3.2" />
 			</g>
 			<g clipPath="url(#plutonium-perk-avatar-clip)" mask="url(#plutonium-perk-avatar-notch)">
-				<image href={avatarLsf} x="358.333" y="74.333" width="80" height="80" preserveAspectRatio="xMidYMid slice" />
+				<image href={AVATAR_LSF} x="358.333" y="74.333" width="80" height="80" preserveAspectRatio="xMidYMid slice" />
 			</g>
 		</svg>
 	);
@@ -238,6 +205,7 @@ export function PlutoniumPageShowcase({
 	onFootnoteClick,
 }: PlutoniumPageShowcaseProps) {
 	const {i18n} = useLingui();
+	const showArt = !RuntimeConfig.isSelfHosted();
 	return (
 		<>
 			{PERK_CARDS.map((card, index) => {
@@ -254,12 +222,14 @@ export function PlutoniumPageShowcase({
 				return (
 					<article
 						key={card.id}
-						className={clsx(styles.perkRow, flipped && styles.perkRowFlipped)}
+						className={clsx(styles.perkRow, showArt ? flipped && styles.perkRowFlipped : styles.perkRowTextOnly)}
 						data-flx={`premium.plutonium-page.perk-row.${card.id}`}
 					>
-						<div className={styles.perkArtColumn} data-flx="premium.plutonium-page.perk-row.art-column">
-							<PerkArt card={card} eager={index === 0} />
-						</div>
+						{showArt && (
+							<div className={styles.perkArtColumn} data-flx="premium.plutonium-page.perk-row.art-column">
+								<PerkArt card={card} eager={index === 0} />
+							</div>
+						)}
 						<div className={styles.perkTextColumn} data-flx="premium.plutonium-page.perk-row.text-column">
 							<h2 className={styles.perkTitle} data-flx="premium.plutonium-page.perk-row.title">
 								{i18n._(card.title, {size: uploadSize})}

fluxer_app/src/features/ui/components/icons/InboxIcon.tsx

@@ -1,4 +1,5 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
+// SPDX-License-Identifier: AGPL-3.0-or-later AND Apache-2.0
+// SPDX-FileCopyrightText: Google LLC
 
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import type {IconProps} from '@phosphor-icons/react';