stream-chat-react-native-core/lib/module/state-store/image-gallery-state-store.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageGalleryStateStore = void 0;
var _reactNativeReanimated = require("react-native-reanimated");
var _streamChat = require("stream-chat");
var _videoPlayerPool = require("./video-player-pool");
var _getGiphyMimeType = require("../components/Attachment/utils/getGiphyMimeType");
var _native = require("../native");
var _types = require("../types/types");
var _getUrlOfImageAttachment = require("../utils/getUrlOfImageAttachment");
var isViewableImageAttachment = attachment => {
  return attachment.type === _types.FileTypes.Image && !attachment.title_link && !attachment.og_scrape_url;
};
var isViewableVideoAttachment = attachment => {
  return attachment.type === _types.FileTypes.Video && (0, _native.isVideoPlayerAvailable)();
};
var isViewableGiphyAttachment = attachment => {
  return attachment.type === _types.FileTypes.Giphy;
};
var stripQueryFromUrl = url => url.split('?')[0];
var INITIAL_STATE = {
  assets: [],
  currentIndex: 0,
  messages: [],
  requesterNode: null,
  selectedAttachmentUrl: undefined
};
var INITIAL_IMAGE_GALLERY_OPTIONS = {
  autoPlayVideo: false,
  giphyVersion: 'fixed_height'
};
class ImageGalleryStateStore {
  constructor(options = {}) {
    this.options = {
      ...INITIAL_IMAGE_GALLERY_OPTIONS,
      ...options
    };
    this.state = new _streamChat.StateStore(INITIAL_STATE);
    this.videoPlayerPool = new _videoPlayerPool.VideoPlayerPool();
    this.currentIndexShared = (0, _reactNativeReanimated.makeMutable)(INITIAL_STATE.currentIndex);
  }
  get messages() {
    return this.state.getLatestValue().messages;
  }
  get selectedAttachmentUrl() {
    return this.state.getLatestValue().selectedAttachmentUrl;
  }
  get requesterNode() {
    return this.state.getLatestValue().requesterNode;
  }
  get attachmentsWithMessage() {
    var messages = this.messages;
    var attachmentsWithMessage = messages.map(message => {
      var _message$attachments;
      return {
        attachments: (_message$attachments = message.attachments) != null ? _message$attachments : [],
        message
      };
    }).filter(({
      attachments
    }) => attachments.some(attachment => {
      if (!attachment) {
        return false;
      }
      return isViewableImageAttachment(attachment) || isViewableVideoAttachment(attachment) || isViewableGiphyAttachment(attachment);
    }));
    return attachmentsWithMessage;
  }
  getAssetId(messageId, assetUrl) {
    return `photoId-${messageId}-${assetUrl}`;
  }
  get assets() {
    var attachmentsWithMessage = this.attachmentsWithMessage;
    var _this$options$giphyVe = this.options.giphyVersion,
      giphyVersion = _this$options$giphyVe === void 0 ? 'fixed_height' : _this$options$giphyVe;
    return attachmentsWithMessage.flatMap(({
      message,
      attachments
    }) => {
      return attachments.map(attachment => {
        var _message$id, _attachment$giphy;
        var assetUrl = (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(attachment, giphyVersion);
        var assetId = this.getAssetId((_message$id = message == null ? void 0 : message.id) != null ? _message$id : '', assetUrl);
        var giphyURL = ((_attachment$giphy = attachment.giphy) == null || (_attachment$giphy = _attachment$giphy[giphyVersion]) == null ? void 0 : _attachment$giphy.url) || attachment.thumb_url || attachment.image_url;
        var giphyMimeType = (0, _getGiphyMimeType.getGiphyMimeType)(giphyURL != null ? giphyURL : '');
        return {
          channelId: message == null ? void 0 : message.cid,
          created_at: message == null ? void 0 : message.created_at,
          id: assetId,
          messageId: message == null ? void 0 : message.id,
          mime_type: attachment.type === 'giphy' ? giphyMimeType : attachment.mime_type,
          original_height: attachment.original_height,
          original_width: attachment.original_width,
          thumb_url: attachment.thumb_url,
          type: attachment.type,
          uri: assetUrl,
          user: message == null ? void 0 : message.user,
          user_id: message == null ? void 0 : message.user_id
        };
      });
    });
  }
  set messages(messages) {
    this.state.partialNext({
      messages
    });
  }
  set selectedAttachmentUrl(selectedAttachmentUrl) {
    this.state.partialNext({
      selectedAttachmentUrl
    });
  }
  set currentIndex(currentIndex) {
    var previousIndex = this.state.getLatestValue().currentIndex;
    this.state.partialNext({
      currentIndex
    });
    this.currentIndexShared.value = currentIndex;
    if (previousIndex !== currentIndex) {
      var activePlayer = this.videoPlayerPool.getActivePlayer();
      if (activePlayer) {
        activePlayer.pause();
      }
    }
  }
  set requesterNode(requesterNode) {
    this.state.partialNext({
      requesterNode
    });
  }
  appendMessages = messages => {
    this.state.partialNext({
      messages: [...this.messages, ...messages]
    });
  };
  removeMessages = messages => {
    this.state.partialNext({
      messages: this.messages.filter(message => !messages.includes(message))
    });
  };
  openImageGallery = ({
    messages,
    requesterNode = null,
    selectedAttachmentUrl
  }) => {
    this.state.partialNext({
      messages,
      requesterNode,
      selectedAttachmentUrl
    });
  };
  subscribeToMessages = () => {
    var unsubscribe = this.state.subscribeWithSelector(currentValue => ({
      messages: currentValue.messages
    }), () => {
      var assets = this.assets;
      this.state.partialNext({
        assets
      });
    });
    return unsubscribe;
  };
  subscribeToSelectedAttachmentUrl = () => {
    var unsubscribe = this.state.subscribeWithSelector(currentValue => ({
      messages: currentValue.messages,
      selectedAttachmentUrl: currentValue.selectedAttachmentUrl
    }), ({
      selectedAttachmentUrl
    }) => {
      if (!selectedAttachmentUrl) {
        return;
      }
      var index = this.assets.findIndex(asset => stripQueryFromUrl(asset.uri) === stripQueryFromUrl(selectedAttachmentUrl != null ? selectedAttachmentUrl : ''));
      this.currentIndex = index === -1 ? 0 : index;
    });
    return unsubscribe;
  };
  registerSubscriptions = () => {
    var subscriptions = [];
    subscriptions.push(this.subscribeToMessages());
    subscriptions.push(this.subscribeToSelectedAttachmentUrl());
    return () => {
      subscriptions.forEach(subscription => subscription());
      this.videoPlayerPool.clear();
    };
  };
  clear = () => {
    this.videoPlayerPool.clear();
    this.state.partialNext(INITIAL_STATE);
    this.currentIndexShared.value = INITIAL_STATE.currentIndex;
  };
}
exports.ImageGalleryStateStore = ImageGalleryStateStore;
//# sourceMappingURL=image-gallery-state-store.js.map