@devvit/ui-renderer 0.10.20-next-2024-04-26-62f55e1ef.0 → 0.10.20-next-2024-04-29-c515e730a.0

package/client/formbuilder/components/image-field/devvit-image-field.d.ts

@@ -0,0 +1,24 @@
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+import { MediaController } from './media-controller.js';
+import type { PropertyValueMap } from 'lit';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export type UIType = 'mobile' | 'desktop';
+export declare class DevvitFormImageField extends InputElement {
+    #private;
+    /** @ignore */
+    static get styles(): import("lit").CSSResultGroup[];
+    protected firstUpdated(_changedProperties: PropertyValueMap<unknown>): void;
+    fileInputInnerWrapper: HTMLDivElement;
+    mediaController: MediaController;
+    get value(): string;
+    set value(newValue: string);
+    _input?: HTMLInputElement;
+    handleRemoveClick: () => void;
+    formDisabledCallback(disabled: boolean): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=devvit-image-field.d.ts.map

package/client/formbuilder/components/image-field/devvit-image-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-image-field.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/devvit-image-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAG/E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAE5C;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1C,qBAAa,oBAAqB,SAAQ,YAAY;;IAMpD,cAAc;IACd,WAAoB,MAAM,mCAEzB;IAED,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,IAAI;IAO1C,qBAAqB,EAAG,cAAc,CAAC;IAIxE,eAAe,EAAE,eAAe,CAE7B;IAEH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,QAAQ,EAJL,MAIK,EAEjB;IAID,MAAM,CAAC,EAAE,gBAAgB,CAAC;IA2B1B,iBAAiB,QAAO,IAAI,CAQ1B;IAeO,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAW7C,MAAM;CA0ChB"}

package/client/formbuilder/components/image-field/devvit-image-field.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DevvitFormImageField_instances, _DevvitFormImageField_dragabble, _DevvitFormImageField_handleInput, _DevvitFormImageField_handleError, _DevvitFormImageField_setRequiredFieldError, _DevvitFormImageField_handleInputWrapperClick;
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+import { DragAndDropController, DragState } from './drag-and-drop-controller.js';
+import { MediaController } from './media-controller.js';
+import { renderEmptyState } from './render-empty-state.js';
+import { renderCarousel } from './render-media-carousel.js';
+import { ALLOWED_IMAGE_MIMETYPES } from './validateMedia.js';
+import { styles } from '../../../../styles.js';
+export class DevvitFormImageField extends InputElement {
+    constructor() {
+        super(...arguments);
+        _DevvitFormImageField_instances.add(this);
+        // @ts-ignore
+        _DevvitFormImageField_dragabble.set(this, new DragAndDropController(this, (files) => {
+            void this.mediaController.handleMedia(files);
+        }));
+        this.mediaController = new MediaController(this, {
+            setValidation: (message) => __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleError).call(this, message),
+        });
+        this.handleRemoveClick = () => {
+            this.mediaController.media = [];
+            if (!this.mediaController.media.length) {
+                __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_setRequiredFieldError).call(this);
+            }
+            // @ts-ignore
+            this.requestUpdate();
+        };
+        _DevvitFormImageField_handleInputWrapperClick.set(this, async (event) => {
+            const target = event.target;
+            const button = target.closest('button.action');
+            if (!button) {
+                return;
+            }
+            if (button.classList.contains('remove')) {
+                this.handleRemoveClick();
+            }
+            else if (button.classList.contains('upload-media')) {
+                this._input?.click();
+            }
+        });
+    }
+    /** @ignore */
+    static get styles() {
+        return [styles, super.styles];
+    }
+    firstUpdated(_changedProperties) {
+        // @ts-ignore
+        super.firstUpdated(_changedProperties);
+        __classPrivateFieldGet(this, _DevvitFormImageField_dragabble, "f").initEventListeners(this.fileInputInnerWrapper);
+    }
+    get value() {
+        return this.mediaController.getValue();
+    }
+    set value(newValue) {
+        this.mediaController.setValue(newValue);
+    }
+    formDisabledCallback(disabled) {
+        if (disabled) {
+            // @ts-ignore
+            this.setCustomValidity('');
+        }
+        else if (!disabled && this.value?.length === 0) {
+            __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_setRequiredFieldError).call(this);
+            // @ts-ignore
+            this.reportValidity();
+        }
+    }
+    render() {
+        const mimetypes = ALLOWED_IMAGE_MIMETYPES;
+        /* eslint-disable @reddit/i18n-shreddit/no-unwrapped-strings */
+        let containerClasses = `border-neutral-border ${this.mediaController.media.length ? 'border-solid' : 'border-dashed'}`;
+        if (__classPrivateFieldGet(this, _DevvitFormImageField_dragabble, "f").dragState === DragState.IN_WINDOW) {
+            containerClasses = 'bg-neutral-background-weak border-alienblue-600 border-dashed';
+        }
+        else if (__classPrivateFieldGet(this, _DevvitFormImageField_dragabble, "f").dragState === DragState.IN_FRAME) {
+            containerClasses = 'bg-neutral-background-weak border-alienblue-600 border-solid';
+        }
+        /* eslint-enable @reddit/i18n-shreddit/no-unwrapped-strings */
+        const HiddenInput = html `
+      <input
+        class="file-input"
+        hidden
+        type="file"
+        @input="${__classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleInput)}"
+        accept="${mimetypes.join(',')}"
+      />
+    `;
+        return html `
+      ${HiddenInput}
+      <div
+        id="fileInputInnerWrapper"
+        class="flex w-full border-sm rounded-dx-md overflow-hidden group min-h-[min(20vw,150px)] ${containerClasses}"
+        @click="${__classPrivateFieldGet(this, _DevvitFormImageField_handleInputWrapperClick, "f")}"
+        @keypress="${__classPrivateFieldGet(this, _DevvitFormImageField_handleInputWrapperClick, "f")}"
+      >
+        ${this.mediaController.media.length
+            ? renderCarousel(this.mediaController)
+            : renderEmptyState({
+                allowImages: true,
+                allowVideos: false,
+                inputDragState: __classPrivateFieldGet(this, _DevvitFormImageField_dragabble, "f").dragState,
+            })}
+      </div>
+    `;
+    }
+}
+_DevvitFormImageField_dragabble = new WeakMap(), _DevvitFormImageField_handleInputWrapperClick = new WeakMap(), _DevvitFormImageField_instances = new WeakSet(), _DevvitFormImageField_handleInput = function _DevvitFormImageField_handleInput(e) {
+    if (!(e.target instanceof HTMLInputElement))
+        return;
+    const files = e.target.files;
+    if (files?.length) {
+        void this.mediaController.handleMedia(Array.from(files));
+        e.target.value = '';
+    }
+}, _DevvitFormImageField_handleError = function _DevvitFormImageField_handleError(error) {
+    // @ts-ignore
+    this.setCustomValidity(error);
+    // @ts-ignore
+    this.reportValidity();
+}, _DevvitFormImageField_setRequiredFieldError = function _DevvitFormImageField_setRequiredFieldError() {
+    __classPrivateFieldGet(this, _DevvitFormImageField_instances, "m", _DevvitFormImageField_handleError).call(this, msg('Please add an image', {
+        desc: 'Message to user to please add an image file',
+    }));
+};
+__decorate([
+    query('#fileInputInnerWrapper'),
+    __metadata("design:type", HTMLDivElement)
+], DevvitFormImageField.prototype, "fileInputInnerWrapper", void 0);
+__decorate([
+    property({ type: MediaController })
+    // @ts-ignore
+    ,
+    __metadata("design:type", MediaController)
+], DevvitFormImageField.prototype, "mediaController", void 0);
+__decorate([
+    query('input.file-input'),
+    __metadata("design:type", HTMLInputElement)
+], DevvitFormImageField.prototype, "_input", void 0);
+// Faceplate's base classes and mixins aren't playing nice with type checking for some reason
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+customElements.define('devvit-form-image-field', DevvitFormImageField);

package/client/formbuilder/components/image-field/drag-and-drop-controller.d.ts

@@ -0,0 +1,19 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export declare enum DragState {
+    IDLE = "IDLE",
+    IN_WINDOW = "IN_WINDOW",
+    IN_FRAME = "IN_FRAME"
+}
+export declare class DragAndDropController implements ReactiveController {
+    #private;
+    dragState: DragState;
+    constructor(host: ReactiveControllerHost, handleDrop: (files: File[]) => void);
+    hostDisconnected(): void;
+    initEventListeners(component: HTMLElement): void;
+}
+//# sourceMappingURL=drag-and-drop-controller.d.ts.map

package/client/formbuilder/components/image-field/drag-and-drop-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-and-drop-controller.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/drag-and-drop-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;;GAIG;AAEH,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,qBAAa,qBAAsB,YAAW,kBAAkB;;IAK9D,SAAS,EAAE,SAAS,CAAkB;gBAE1B,IAAI,EAAE,sBAAsB,EAAE,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI;IAa7E,gBAAgB,IAAI,IAAI;IAIjB,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAkExD"}

package/client/formbuilder/components/image-field/drag-and-drop-controller.js

@@ -0,0 +1,113 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DragAndDropController_instances, _DragAndDropController_component, _DragAndDropController_handleDrop, _DragAndDropController_host, _DragAndDropController_disposeEventListeners, _DragAndDropController_onComponentDragEnter, _DragAndDropController_onComponentDrop, _DragAndDropController_onWindowDragEnter, _DragAndDropController_onWindowDragLeave, _DragAndDropController_onWindowDragOver;
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export var DragState;
+(function (DragState) {
+    DragState["IDLE"] = "IDLE";
+    DragState["IN_WINDOW"] = "IN_WINDOW";
+    DragState["IN_FRAME"] = "IN_FRAME";
+})(DragState || (DragState = {}));
+export class DragAndDropController {
+    constructor(host, handleDrop) {
+        _DragAndDropController_instances.add(this);
+        _DragAndDropController_component.set(this, null);
+        _DragAndDropController_handleDrop.set(this, void 0);
+        _DragAndDropController_host.set(this, void 0);
+        this.dragState = DragState.IDLE;
+        _DragAndDropController_onComponentDragEnter.set(this, (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.dragState = DragState.IN_FRAME;
+            __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+        });
+        _DragAndDropController_onComponentDrop.set(this, (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) {
+                const files = getFilesFromDataTransfer(e.dataTransfer);
+                __classPrivateFieldGet(this, _DragAndDropController_handleDrop, "f").call(this, files);
+            }
+            this.dragState = DragState.IDLE;
+            __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+        });
+        _DragAndDropController_onWindowDragEnter.set(this, (e) => {
+            e.preventDefault();
+            this.dragState = DragState.IN_WINDOW;
+            __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+        });
+        _DragAndDropController_onWindowDragLeave.set(this, (e) => {
+            e.preventDefault();
+            if (!e.relatedTarget || e.relatedTarget === document.body) {
+                this.dragState = DragState.IDLE;
+                __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+            }
+        });
+        _DragAndDropController_onWindowDragOver.set(this, (e) => {
+            e.preventDefault();
+        });
+        __classPrivateFieldSet(this, _DragAndDropController_handleDrop, handleDrop, "f");
+        __classPrivateFieldSet(this, _DragAndDropController_host, host, "f");
+        host.addController(this);
+        // Bind event handlers to ensure the correct 'this' context
+        __classPrivateFieldSet(this, _DragAndDropController_onComponentDragEnter, __classPrivateFieldGet(this, _DragAndDropController_onComponentDragEnter, "f").bind(this), "f");
+        __classPrivateFieldSet(this, _DragAndDropController_onComponentDrop, __classPrivateFieldGet(this, _DragAndDropController_onComponentDrop, "f").bind(this), "f");
+        __classPrivateFieldSet(this, _DragAndDropController_onWindowDragEnter, __classPrivateFieldGet(this, _DragAndDropController_onWindowDragEnter, "f").bind(this), "f");
+        __classPrivateFieldSet(this, _DragAndDropController_onWindowDragLeave, __classPrivateFieldGet(this, _DragAndDropController_onWindowDragLeave, "f").bind(this), "f");
+        __classPrivateFieldSet(this, _DragAndDropController_onWindowDragOver, __classPrivateFieldGet(this, _DragAndDropController_onWindowDragOver, "f").bind(this), "f");
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _DragAndDropController_instances, "m", _DragAndDropController_disposeEventListeners).call(this);
+    }
+    initEventListeners(component) {
+        __classPrivateFieldSet(this, _DragAndDropController_component, component, "f");
+        this.dragState = DragState.IDLE;
+        __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+        // Component-specific events
+        __classPrivateFieldGet(this, _DragAndDropController_component, "f").addEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onComponentDragEnter, "f"));
+        __classPrivateFieldGet(this, _DragAndDropController_component, "f").addEventListener('drop', __classPrivateFieldGet(this, _DragAndDropController_onComponentDrop, "f"));
+        // Window-specific events
+        window.addEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragEnter, "f"));
+        window.addEventListener('dragleave', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragLeave, "f"));
+        window.addEventListener('drop', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragLeave, "f"));
+        window.addEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragOver, "f"));
+    }
+}
+_DragAndDropController_component = new WeakMap(), _DragAndDropController_handleDrop = new WeakMap(), _DragAndDropController_host = new WeakMap(), _DragAndDropController_onComponentDragEnter = new WeakMap(), _DragAndDropController_onComponentDrop = new WeakMap(), _DragAndDropController_onWindowDragEnter = new WeakMap(), _DragAndDropController_onWindowDragLeave = new WeakMap(), _DragAndDropController_onWindowDragOver = new WeakMap(), _DragAndDropController_instances = new WeakSet(), _DragAndDropController_disposeEventListeners = function _DragAndDropController_disposeEventListeners() {
+    if (__classPrivateFieldGet(this, _DragAndDropController_component, "f")) {
+        __classPrivateFieldGet(this, _DragAndDropController_component, "f").removeEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onComponentDragEnter, "f"));
+        __classPrivateFieldGet(this, _DragAndDropController_component, "f").removeEventListener('drop', __classPrivateFieldGet(this, _DragAndDropController_onComponentDrop, "f"));
+    }
+    // Remove window-specific event listeners
+    window.removeEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragEnter, "f"));
+    window.removeEventListener('dragleave', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragLeave, "f"));
+    window.removeEventListener('drop', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragLeave, "f")); // Match with the correct event
+    window.removeEventListener('dragover', __classPrivateFieldGet(this, _DragAndDropController_onWindowDragOver, "f"));
+    this.dragState = DragState.IDLE;
+    __classPrivateFieldGet(this, _DragAndDropController_host, "f").requestUpdate();
+};
+const getFilesFromDataTransfer = (dataTransfer) => {
+    if (dataTransfer.items) {
+        return Array.from(dataTransfer.items)
+            .map((item) => (item.kind === 'file' ? item.getAsFile() : null))
+            .filter(Boolean);
+    }
+    else if (dataTransfer.files) {
+        return Array.from(dataTransfer.files);
+    }
+    else {
+        return [];
+    }
+};

package/client/formbuilder/components/image-field/media-controller.d.ts

@@ -0,0 +1,59 @@
+import type { ValidationResult } from './validateMedia.js';
+import type { LitElement } from 'lit';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+interface UploadResponse {
+    url?: string;
+    mediaId?: string;
+    error?: string;
+}
+export type MediaValue = {
+    mediaId: string;
+    url: string;
+    caption?: string;
+    outboundUrl?: string;
+    posterUrl?: string;
+    isGif?: boolean;
+};
+export type MediaItem = {
+    id: string;
+    file?: File;
+    type?: 'still' | 'video';
+    src?: string;
+    posterSrc?: string;
+    status?: MediaStatus;
+    validationResult?: ValidationResult;
+    mediaResponse?: Promise<UploadResponse>;
+    posterResponse?: Promise<UploadResponse>;
+    value?: MediaValue;
+    width?: number;
+    height?: number;
+};
+export declare enum MediaStatus {
+    loading = "loading",
+    success = "success"
+}
+export declare enum PostType {
+    image = "image"
+}
+type ValidationCallback = (message: string) => void;
+type MediaControllerOptions = {
+    setValidation?: ValidationCallback;
+};
+export declare const MAX_FILE_COUNT = 20;
+export declare class MediaController {
+    #private;
+    media: MediaItem[];
+    constructor(host: LitElement, options?: MediaControllerOptions);
+    getValue(): string;
+    setValue(newValue: string): void;
+    handleMedia(files: File[]): Promise<void>;
+    getPostType(): PostType;
+    hasLoadingMedia(): boolean;
+    removeMedia(index: number): void;
+}
+export {};
+//# sourceMappingURL=media-controller.d.ts.map

package/client/formbuilder/components/image-field/media-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-controller.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/media-controller.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC;;;;GAIG;AAGH,UAAU,cAAc;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,QAAQ;IAClB,KAAK,UAAU;CAChB;AAED,KAAK,kBAAkB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpD,KAAK,sBAAsB,GAAG;IAC5B,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,qBAAa,eAAe;;IAC1B,KAAK,EAAE,SAAS,EAAE,CAAM;gBAKZ,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,sBAAsB;IAK9D,QAAQ,IAAI,MAAM;IAQlB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAmB1B,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IA4H/C,WAAW,IAAI,QAAQ;IAIvB,eAAe,IAAI,OAAO;IA0D1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAGjC"}

package/client/formbuilder/components/image-field/media-controller.js

@@ -0,0 +1,207 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MediaController_instances, _MediaController_host, _MediaController_setValidation, _MediaController_getRandomId, _MediaController_fireChangeEvent, _MediaController_handleImageResponse, _MediaController_handleImage, _MediaController_upload, _MediaController_createMediaItem, _MediaController_createImage, _MediaController_isVideo, _MediaController_dispatchAlert, _MediaController_filterValidFiles, _MediaController_getDefaultErrorMessage, _MediaController_handleError;
+import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
+import { msg } from '@lit/localize';
+import { ALLOWED_VIDEO_MIMETYPES, validateImageFile } from './validateMedia.js';
+export var MediaStatus;
+(function (MediaStatus) {
+    MediaStatus["loading"] = "loading";
+    MediaStatus["success"] = "success";
+})(MediaStatus || (MediaStatus = {}));
+export var PostType;
+(function (PostType) {
+    PostType["image"] = "image";
+})(PostType || (PostType = {}));
+export const MAX_FILE_COUNT = 20;
+export class MediaController {
+    constructor(host, options) {
+        _MediaController_instances.add(this);
+        this.media = [];
+        _MediaController_host.set(this, void 0);
+        _MediaController_setValidation.set(this, void 0);
+        __classPrivateFieldSet(this, _MediaController_host, host, "f");
+        __classPrivateFieldSet(this, _MediaController_setValidation, options?.setValidation ?? (() => { }), "f");
+    }
+    getValue() {
+        const validFiles = this.media.filter((media) => media.status === MediaStatus.success);
+        if (validFiles.length === 0) {
+            return '';
+        }
+        return JSON.stringify(validFiles.map((media) => media.value));
+    }
+    setValue(newValue) {
+        const val = JSON.parse(newValue);
+        this.media = val;
+    }
+    async handleMedia(files) {
+        try {
+            const seed = this.media.length;
+            __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, '');
+            const validFiles = __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_filterValidFiles).call(this, files);
+            if (validFiles.length > 0) {
+                const mediaItems = [];
+                for (const file of validFiles) {
+                    mediaItems.push(__classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleImage).call(this, file));
+                }
+                this.media = this.media.concat(mediaItems);
+                __classPrivateFieldGet(this, _MediaController_host, "f").requestUpdate('mediaLength', seed);
+                const mediaResponse = await Promise.all(mediaItems.map((item) => item.mediaResponse));
+                __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleImageResponse).call(this, mediaResponse, seed);
+                __classPrivateFieldGet(this, _MediaController_host, "f").requestUpdate();
+            }
+        }
+        catch (error) {
+            if (!(error instanceof Error)) {
+                console.error(error);
+                __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleError).call(this, msg('Something went wrong. Please try again later', {
+                    desc: 'Unknown error uploading the file',
+                }));
+                return;
+            }
+            __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_handleError).call(this, error.message);
+        }
+    }
+    getPostType() {
+        return PostType.image;
+    }
+    hasLoadingMedia() {
+        return this.media.some((media) => media.status === MediaStatus.loading);
+    }
+    removeMedia(index) {
+        this.media.splice(index, 1);
+    }
+}
+_MediaController_host = new WeakMap(), _MediaController_setValidation = new WeakMap(), _MediaController_instances = new WeakSet(), _MediaController_getRandomId = function _MediaController_getRandomId(filename) {
+    // match all temporary media IDs with that filename
+    // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings, security/detect-non-literal-regexp
+    const regex = new RegExp(`^${filename}-(?<id>\\d+)$`);
+    // find the highest suffix and increment it by one
+    const suffix = 1 +
+        this.media.reduce((currSuffix, media) => {
+            const match = media.id.match(regex);
+            return match ? Math.max(currSuffix, parseInt(match.groups.id, 10)) : currSuffix;
+        }, -1);
+    return `${filename}-${suffix}`;
+}, _MediaController_fireChangeEvent = function _MediaController_fireChangeEvent() {
+    // eslint-disable-next-line @reddit/i18n-shreddit/no-unwrapped-strings
+    const event = new Event('change', { bubbles: true });
+    __classPrivateFieldGet(this, _MediaController_host, "f").dispatchEvent(event);
+}, _MediaController_handleImageResponse = function _MediaController_handleImageResponse(mediaResponses, seed) {
+    __classPrivateFieldGet(this, _MediaController_host, "f").setAttribute('name', 'image');
+    let success = false;
+    const failedItemsIndexes = [];
+    for (const [i, mediaResponse] of mediaResponses.entries()) {
+        const index = seed + i;
+        const { url, mediaId, error = null } = mediaResponse ?? {};
+        const media = this.media[index];
+        if (url && mediaId) {
+            const galleryItem = { mediaId, url };
+            media.id = mediaId;
+            media.value = galleryItem;
+            media.status = MediaStatus.success;
+            success = true;
+        }
+        else {
+            __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_dispatchAlert).call(this, error);
+            failedItemsIndexes.push(index);
+        }
+    }
+    if (failedItemsIndexes.length > 0) {
+        this.media = this.media.filter((_, index) => !failedItemsIndexes.includes(index));
+    }
+    if (success) {
+        __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_fireChangeEvent).call(this);
+    }
+    else {
+        __classPrivateFieldGet(this, _MediaController_host, "f").requestUpdate('mediaLength', this.media.length - 1);
+    }
+}, _MediaController_handleImage = function _MediaController_handleImage(file) {
+    const IMAGE_UPLOAD_ERROR = msg('Unable to upload image', {
+        desc: 'Error: unable to upload image file',
+    });
+    const mediaItem = __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_createImage).call(this, file);
+    const validation = validateImageFile(file);
+    if (!validation.valid) {
+        mediaItem.mediaResponse = Promise.resolve({
+            error: validation.error ?? IMAGE_UPLOAD_ERROR,
+        });
+    }
+    else {
+        mediaItem.mediaResponse = __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_upload).call(this, file);
+    }
+    return mediaItem;
+}, _MediaController_upload = async function _MediaController_upload(blob) {
+    console.log('UPLOAD HAPPENS');
+    const imageUploadEvent = customEvent('devvit-image-upload', {
+        blob,
+        uploadResponse: null,
+    });
+    __classPrivateFieldGet(this, _MediaController_host, "f").dispatchEvent(imageUploadEvent);
+    const response = await imageUploadEvent.detail.uploadResponse;
+    if (!response) {
+        return Promise.resolve({
+            error: 'Image upload failed',
+        });
+    }
+    return response;
+}, _MediaController_createMediaItem = function _MediaController_createMediaItem(file) {
+    const src = URL.createObjectURL(file);
+    return {
+        id: __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_getRandomId).call(this, file.name),
+        file,
+        src,
+        status: MediaStatus.loading,
+    };
+}, _MediaController_createImage = function _MediaController_createImage(file) {
+    return {
+        ...__classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_createMediaItem).call(this, file),
+        type: 'still',
+    };
+}, _MediaController_isVideo = function _MediaController_isVideo(file) {
+    if (!file)
+        return false;
+    return ALLOWED_VIDEO_MIMETYPES.includes(file.type);
+}, _MediaController_dispatchAlert = function _MediaController_dispatchAlert(message) {
+    __classPrivateFieldGet(this, _MediaController_host, "f").dispatchEvent(customEvent('faceplate-alert', {
+        level: 4, // warning
+        message: message ?? __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_getDefaultErrorMessage).call(this),
+    }));
+}, _MediaController_filterValidFiles = function _MediaController_filterValidFiles(files) {
+    let mediaFiles = files;
+    const hasVideoInSelectedFiles = files.some((file) => __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_isVideo).call(this, file));
+    const isMultipleSelection = files.length > 1;
+    const isValidMediaPresent = this.media.length > 0;
+    if (isMultipleSelection || isValidMediaPresent) {
+        const GALLERY_NOT_ALLOWED_ERROR = msg(`Only one file can be used for the image input`, {
+            desc: 'Error: Multiple files cannot be added to image input',
+        });
+        __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_dispatchAlert).call(this, GALLERY_NOT_ALLOWED_ERROR);
+        return [];
+    }
+    if (hasVideoInSelectedFiles && (isValidMediaPresent || isMultipleSelection)) {
+        const GALLERY_CONTAIN_VIDEO_ERROR = msg('Image input can only contain images', {
+            desc: 'Error when users upload non-image media files to image input',
+        });
+        __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_dispatchAlert).call(this, GALLERY_CONTAIN_VIDEO_ERROR);
+        mediaFiles = files.filter((file) => !__classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_isVideo).call(this, file));
+    }
+    return mediaFiles;
+}, _MediaController_getDefaultErrorMessage = function _MediaController_getDefaultErrorMessage() {
+    return msg('There was an error uploading the file', {
+        desc: 'Generic error message when file upload fails',
+        id: 'generic-error-message-for-uploading-file',
+    });
+}, _MediaController_handleError = function _MediaController_handleError(err) {
+    const error = err || __classPrivateFieldGet(this, _MediaController_instances, "m", _MediaController_getDefaultErrorMessage).call(this);
+    __classPrivateFieldGet(this, _MediaController_setValidation, "f").call(this, error);
+};

package/client/formbuilder/components/image-field/render-empty-state.d.ts

@@ -0,0 +1,15 @@
+import type { TemplateResult } from 'lit';
+import { DragState } from './drag-and-drop-controller.js';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+interface RenderEmptyStateProps {
+    allowImages: boolean;
+    allowVideos: boolean;
+    inputDragState: DragState;
+}
+export declare function renderEmptyState({ allowImages, allowVideos, inputDragState, }: RenderEmptyStateProps): TemplateResult<1>;
+export {};
+//# sourceMappingURL=render-empty-state.d.ts.map

package/client/formbuilder/components/image-field/render-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-empty-state.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/render-empty-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D;;;;GAIG;AAEH,UAAU,qBAAqB;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,WAAW,EACX,cAAc,GACf,EAAE,qBAAqB,GAAG,cAAc,CAAC,CAAC,CAAC,CAuC3C"}