@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/ExternalSource/ExternalSource.js

@@ -0,0 +1,268 @@
+// @ts-check
+
+import { create } from '@symbiotejs/symbiote';
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { stringToArray } from '../../utils/stringToArray.js';
+import { wildcardRegexp } from '../../utils/wildcardRegexp.js';
+import { buildStyles } from './buildStyles.js';
+import { registerMessage, unregisterMessage } from './messages.js';
+import { queryString } from './query-string.js';
+
+/** @typedef {{ externalSourceType: string }} ActivityParams */
+
+/**
+ * @typedef {{
+ *   type: 'file-selected';
+ *   obj_type: 'selected_file';
+ *   filename: string;
+ *   url: string;
+ *   alternatives?: Record<string, string>;
+ * }} SelectedFileMessage
+ */
+
+/**
+ * @typedef {{
+ *   type: 'embed-css';
+ *   style: string;
+ * }} EmbedCssMessage
+ */
+
+/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
+
+export class ExternalSource extends UploaderBlock {
+  couldBeCtxOwner = true;
+  activityType = ActivityBlock.activities.EXTERNAL;
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      activityIcon: '',
+      activityCaption: '',
+      selectedList: [],
+      counter: 0,
+      multiple: false,
+      onDone: () => {
+        for (const message of this.$.selectedList) {
+          const url = this.extractUrlFromMessage(message);
+          const { filename } = message;
+          const { externalSourceType } = this.activityParams;
+          this.api.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
+        }
+
+        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      },
+      onCancel: () => {
+        this.historyBack();
+      },
+    };
+  }
+
+  /**
+   * @private
+   * @type {HTMLIFrameElement | null}
+   */
+  _iframe = null;
+
+  initCallback() {
+    super.initCallback();
+    this.registerActivity(this.activityType, {
+      onActivate: () => {
+        let { externalSourceType } = /** @type {ActivityParams} */ (this.activityParams);
+
+        if (!externalSourceType) {
+          this.$['*currentActivity'] = null;
+          this.setOrAddState('*modalActive', false);
+          console.error(`Param "externalSourceType" is required for activity "${this.activityType}"`);
+          return;
+        }
+
+        this.set$({
+          activityCaption: `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`,
+          activityIcon: externalSourceType,
+        });
+
+        this.mountIframe();
+      },
+    });
+    this.sub('*currentActivityParams', (val) => {
+      if (!this.isActivityActive) {
+        return;
+      }
+      this.unmountIframe();
+      this.mountIframe();
+    });
+    this.sub('*currentActivity', (val) => {
+      if (val !== this.activityType) {
+        this.unmountIframe();
+      }
+    });
+    this.sub('selectedList', (list) => {
+      this.$.counter = list.length;
+    });
+    this.subConfigValue('multiple', (multiple) => {
+      this.$.multiple = multiple;
+    });
+  }
+
+  /**
+   * @private
+   * @param {SelectedFileMessage} message
+   */
+  extractUrlFromMessage(message) {
+    if (message.alternatives) {
+      const preferredTypes = stringToArray(this.cfg.externalSourcesPreferredTypes);
+      for (const preferredType of preferredTypes) {
+        const regexp = wildcardRegexp(preferredType);
+        for (const [type, typeUrl] of Object.entries(message.alternatives)) {
+          if (regexp.test(type)) {
+            return typeUrl;
+          }
+        }
+      }
+    }
+
+    return message.url;
+  }
+
+  /**
+   * @private
+   * @param {Message} message
+   */
+  sendMessage(message) {
+    this._iframe?.contentWindow?.postMessage(JSON.stringify(message), '*');
+  }
+
+  /**
+   * @private
+   * @param {SelectedFileMessage} message
+   */
+  async handleFileSelected(message) {
+    if (!this.$.multiple && this.$.selectedList.length) {
+      return;
+    }
+
+    this.$.selectedList = [...this.$.selectedList, message];
+
+    if (!this.$.multiple) {
+      this.$.onDone();
+    }
+  }
+
+  /** @private */
+  handleIframeLoad() {
+    this.applyStyles();
+  }
+
+  /**
+   * @private
+   * @param {string} propName
+   */
+  getCssValue(propName) {
+    let style = window.getComputedStyle(this);
+    return style.getPropertyValue(propName).trim();
+  }
+
+  /** @private */
+  applyStyles() {
+    let colors = {
+      radius: this.getCssValue('--uc-radius'),
+      backgroundColor: this.getCssValue('--uc-background'),
+      textColor: this.getCssValue('--uc-foreground'),
+      secondaryColor: this.getCssValue('--uc-secondary'),
+      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
+      secondaryHover: this.getCssValue('--uc-secondary-hover'),
+      linkColor: this.getCssValue('--uc-primary'),
+      linkColorHover: this.getCssValue('--uc-primary-hover'),
+      fontFamily: this.getCssValue('--uc-font-family'),
+      fontSize: this.getCssValue('--uc-font-size'),
+    };
+
+    this.sendMessage({
+      type: 'embed-css',
+      style: buildStyles(colors),
+    });
+  }
+
+  /** @private */
+  remoteUrl() {
+    const { pubkey, remoteTabSessionKey, socialBaseUrl } = this.cfg;
+    const { externalSourceType } = this.activityParams;
+    const lang = this.l10n('social-source-lang')?.split('-')?.[0] || 'en';
+    const params = {
+      lang,
+      public_key: pubkey,
+      images_only: false.toString(),
+      pass_window_open: false,
+      session_key: remoteTabSessionKey,
+    };
+    const url = new URL(`/window3/${externalSourceType}`, socialBaseUrl);
+    url.search = queryString(params);
+    return url.toString();
+  }
+
+  /** @private */
+  mountIframe() {
+    /** @type {HTMLIFrameElement} */
+    // @ts-ignore
+    let iframe = create({
+      tag: 'iframe',
+      attributes: {
+        src: this.remoteUrl(),
+        marginheight: 0,
+        marginwidth: 0,
+        frameborder: 0,
+        allowTransparency: true,
+      },
+    });
+    iframe.addEventListener('load', this.handleIframeLoad.bind(this));
+
+    this.ref.iframeWrapper.innerHTML = '';
+    this.ref.iframeWrapper.appendChild(iframe);
+
+    registerMessage('file-selected', iframe.contentWindow, this.handleFileSelected.bind(this));
+
+    this._iframe = iframe;
+    this.$.selectedList = [];
+  }
+
+  /** @private */
+  unmountIframe() {
+    this._iframe && unregisterMessage('file-selected', this._iframe.contentWindow);
+    this.ref.iframeWrapper.innerHTML = '';
+    this._iframe = null;
+    this.$.selectedList = [];
+    this.$.counter = 0;
+  }
+}
+
+ExternalSource.template = /* HTML */ `
+  <uc-activity-header>
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
+      <uc-icon name="back"></uc-icon>
+    </button>
+    <div>
+      <uc-icon set="@name: activityIcon"></uc-icon>
+      <span>{{activityCaption}}</span>
+    </div>
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *historyBack">
+      <uc-icon name="close"></uc-icon>
+    </button>
+  </uc-activity-header>
+  <div class="uc-content">
+    <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
+    <div class="uc-toolbar">
+      <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
+      <div></div>
+      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <button
+        type="button"
+        class="uc-done-btn uc-primary-btn"
+        set="onclick: onDone; @disabled: !counter"
+        l10n="done"
+      ></button>
+    </div>
+  </div>
+`;

package/blocks/ExternalSource/buildStyles.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHover, secondaryColor, secondaryHover, secondaryForegroundColor, fontFamily, fontSize, radius, }: {
+    textColor: string;
+    backgroundColor: string;
+    linkColor: string;
+    linkColorHover: string;
+    secondaryColor: string;
+    secondaryHover: string;
+    secondaryForegroundColor: string;
+    fontFamily: string;
+    fontSize: string;
+    radius: string;
+}): string;
+//# sourceMappingURL=buildStyles.d.ts.map

package/blocks/ExternalSource/buildStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["buildStyles.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;GAaG;AACH,gLAbW;IACV,SAAa,EAAE,MAAM,CAAC;IACtB,eAAmB,EAAE,MAAM,CAAC;IAC5B,SAAa,EAAE,MAAM,CAAC;IACtB,cAAkB,EAAE,MAAM,CAAC;IAC3B,cAAkB,EAAE,MAAM,CAAC;IAC3B,cAAkB,EAAE,MAAM,CAAC;IAC3B,wBAA4B,EAAE,MAAM,CAAC;IACrC,UAAc,EAAE,MAAM,CAAC;IACvB,QAAY,EAAE,MAAM,CAAC;IACrB,MAAU,EAAE,MAAM,CAAC;CAChB,UAsGH"}

package/blocks/ExternalSource/buildStyles.js

@@ -0,0 +1,133 @@
+// @ts-check
+
+/**
+ * @param {Record<string, Record<string, string>>} style
+ * @returns
+ */
+const styleToCss = (style) => {
+  const css = Object.keys(style).reduce((acc, selector) => {
+    const propertiesObj = style[selector];
+    const propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
+      const value = propertiesObj[prop];
+      return acc + `${prop}: ${value};`;
+    }, '');
+    return acc + `${selector}{${propertiesStr}}`;
+  }, '');
+  return css;
+};
+
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({
+  textColor,
+  backgroundColor,
+  linkColor,
+  linkColorHover,
+  secondaryColor,
+  secondaryHover,
+  secondaryForegroundColor,
+  fontFamily,
+  fontSize,
+  radius,
+}) {
+  const border = `solid 1px ${secondaryColor}`;
+
+  // TODO: we need to update source source styles, add css custom properties to control theme
+  return styleToCss({
+    body: {
+      color: textColor,
+      'background-color': backgroundColor,
+      'font-family': fontFamily,
+      'font-size': fontSize,
+    },
+    '.side-bar': {
+      background: 'inherit',
+      'border-right': border,
+    },
+    '.main-content': {
+      background: 'inherit',
+    },
+    '.main-content-header': {
+      background: 'inherit',
+    },
+    '.main-content-footer': {
+      background: 'inherit',
+    },
+    '.list-table-row': {
+      color: 'inherit',
+    },
+    '.list-table-row:hover': {
+      background: secondaryColor,
+    },
+    '.list-table-row .list-table-cell-a, .list-table-row .list-table-cell-b': {
+      'border-top': border,
+    },
+    '.list-table-body .list-items': {
+      'border-bottom': border,
+    },
+    '.bread-crumbs a': {
+      color: linkColor,
+    },
+    '.bread-crumbs a:hover': {
+      color: linkColorHover,
+    },
+    '.main-content.loading': {
+      background: `${backgroundColor} url(/static/images/loading_spinner.gif) center no-repeat`,
+      'background-size': '25px 25px',
+    },
+    '.list-icons-item': {
+      'background-color': secondaryColor,
+    },
+    '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a': {
+      color: linkColor,
+    },
+    '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a:hover': {
+      color: linkColorHover,
+    },
+    '.side-bar-menu a': {
+      color: linkColor,
+    },
+    '.side-bar-menu a:hover': {
+      color: linkColorHover,
+    },
+    '.source-gdrive .side-bar-menu .current, .source-gdrive .side-bar-menu a:hover, .source-gphotos .side-bar-menu .current, .source-gphotos .side-bar-menu a:hover':
+      {
+        color: linkColorHover,
+      },
+    '.source-vk .side-bar-menu a': {
+      color: linkColor,
+    },
+    '.source-vk .side-bar-menu a:hover': {
+      color: linkColorHover,
+      background: 'none',
+    },
+    'input[type=submit], .button, button': {
+      color: secondaryForegroundColor,
+      background: secondaryColor,
+      'box-shadow': 'none',
+      border: 'none',
+      'border-radius': radius,
+    },
+    'input[type=submit]:hover, .button:hover, button:hover': {
+      background: secondaryHover,
+    },
+    '.text-field, input[type=search], input[type=text], input[type=url], textarea': {
+      color: secondaryForegroundColor,
+      'border-radius': radius,
+      background: secondaryColor,
+      border,
+    },
+  });
+}

package/blocks/ExternalSource/external-source.css

@@ -0,0 +1,65 @@
+uc-external-source {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--uc-background);
+  overflow: hidden;
+}
+
+[uc-modal] uc-external-source {
+  width: min(
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2)
+  );
+  height: var(--modal-content-height-fill, 100%);
+  max-height: var(--modal-max-content-height);
+}
+
+uc-external-source > .uc-content {
+  position: relative;
+  display: grid;
+  flex: 1;
+  grid-template-rows: 1fr min-content;
+}
+
+@media only screen and (max-width: 430px) {
+  uc-external-source {
+    width: calc(100vw - var(--uc-padding) * 2);
+    height: var(--modal-content-height-fill, 100%);
+  }
+}
+
+uc-external-source iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+uc-external-source .uc-iframe-wrapper {
+  overflow: hidden;
+}
+
+uc-external-source .uc-toolbar {
+  display: grid;
+  grid-gap: var(--uc-padding);
+  grid-template-columns: max-content 1fr max-content max-content;
+  align-items: center;
+  width: 100%;
+  padding: var(--uc-padding);
+  border-top: 1px solid var(--uc-border);
+}
+
+uc-external-source .uc-back-btn {
+  padding-left: 0;
+}
+
+uc-external-source .uc-selected-counter {
+  display: flex;
+  grid-gap: var(--uc-padding);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--uc-padding);
+  color: var(--uc-muted-foreground);
+}

package/blocks/ExternalSource/messages.d.ts

@@ -0,0 +1,3 @@
+export function registerMessage(type: any, sender: any, callback: any): void;
+export function unregisterMessage(type: any, sender: any): void;
+//# sourceMappingURL=messages.d.ts.map

package/blocks/ExternalSource/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["messages.js"],"names":[],"mappings":"AAoBA,6EAMC;AAED,gEAIC"}

package/blocks/ExternalSource/messages.js

@@ -0,0 +1,35 @@
+let cbMapping = {};
+
+window.addEventListener('message', (e) => {
+  let message;
+  try {
+    message = JSON.parse(e.data);
+  } catch (err) {
+    return;
+  }
+
+  if (message?.type in cbMapping) {
+    let cbList = cbMapping[message.type];
+    for (let [sender, callback] of cbList) {
+      if (e.source === sender) {
+        callback(message);
+      }
+    }
+  }
+});
+
+const registerMessage = function (type, sender, callback) {
+  if (!(type in cbMapping)) {
+    cbMapping[type] = [];
+  }
+
+  cbMapping[type].push([sender, callback]);
+};
+
+const unregisterMessage = function (type, sender) {
+  if (type in cbMapping) {
+    cbMapping[type] = cbMapping[type].filter((item) => item[0] !== sender);
+  }
+};
+
+export { registerMessage, unregisterMessage };

package/blocks/ExternalSource/query-string.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {{ [key: string]: string | number | boolean | null | undefined }} params
+ * @returns {string}
+ */
+export function queryString(params: {
+    [key: string]: string | number | boolean | null | undefined;
+}): string;
+//# sourceMappingURL=query-string.d.ts.map

package/blocks/ExternalSource/query-string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-string.d.ts","sourceRoot":"","sources":["query-string.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH;;IAFa,MAAM,CAWlB"}

package/blocks/ExternalSource/query-string.js

@@ -0,0 +1,14 @@
+/**
+ * @param {{ [key: string]: string | number | boolean | null | undefined }} params
+ * @returns {string}
+ */
+export function queryString(params) {
+  let list = [];
+  for (let [key, value] of Object.entries(params)) {
+    if (value === undefined || value === null || (typeof value === 'string' && value.length === 0)) {
+      continue;
+    }
+    list.push(`${key}=${encodeURIComponent(value)}`);
+  }
+  return list.join('&');
+}

package/blocks/FileItem/FileItem.d.ts

@@ -0,0 +1,97 @@
+export class FileItem extends UploaderBlock {
+    /** @private */
+    private _entrySubs;
+    /**
+     * @private
+     * @type {any} TODO: Add types for upload entry
+     */
+    private _entry;
+    /** @private */
+    private _isIntersecting;
+    /** @private */
+    private _debouncedGenerateThumb;
+    /** @private */
+    private _debouncedCalculateState;
+    /** @private */
+    private _renderedOnce;
+    init$: {
+        uid: string;
+        itemName: string;
+        errorText: string;
+        thumbUrl: string;
+        progressValue: number;
+        progressVisible: boolean;
+        badgeIcon: string;
+        isFinished: boolean;
+        isFailed: boolean;
+        isUploading: boolean;
+        isFocused: boolean;
+        isEditable: boolean;
+        state: symbol;
+        onEdit: () => void;
+        onRemove: () => void;
+        onUpload: () => void;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*focusedEntry': null;
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>; /** @private */
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    _reset(): void;
+    /**
+     * @private
+     * @param {IntersectionObserverEntry[]} entries
+     */
+    private _observerCallback;
+    /** @private */
+    private _calculateState;
+    /** @private */
+    private _generateThumbnail;
+    /**
+     * @private
+     * @param {string} prop
+     * @param {(value: any) => void} handler
+     */
+    private _subEntry;
+    /**
+     * @private
+     * @param {String} id
+     */
+    private _handleEntryId;
+    /** @param {(typeof FileItemState)[keyof typeof FileItemState]} state */
+    _handleState(state: (typeof FileItemState)[keyof typeof FileItemState]): void;
+    /** @private */
+    private _observer;
+    _settingsOfShrink(): {
+        size: number;
+        quality: number | undefined;
+    };
+    /**
+     * @private
+     * @param {File} file
+     */
+    private _processShrink;
+    upload(): Promise<void>;
+}
+export namespace FileItem {
+    let template: string;
+    let activeInstances: Set<any>;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+declare const FileItemState: Readonly<{
+    FINISHED: symbol;
+    FAILED: symbol;
+    UPLOADING: symbol;
+    IDLE: symbol;
+}>;
+export {};
+//# sourceMappingURL=FileItem.d.ts.map

package/blocks/FileItem/FileItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAkBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;uCAXF,eAAe;;;;;;;MA0CZ;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QAsB7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAqFC;CACF;;;;;8BAla6B,iCAAiC;AAO/D;;;;;GAKG"}