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

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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageGalleryStateStore = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
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'
};
var ImageGalleryStateStore = exports.ImageGalleryStateStore = function () {
  function ImageGalleryStateStore(options = {}) {
    (0, _classCallCheck2.default)(this, ImageGalleryStateStore);
    this.appendMessages = messages => {
      this.state.partialNext({
        messages: [...this.messages, ...messages]
      });
    };
    this.removeMessages = messages => {
      this.state.partialNext({
        messages: this.messages.filter(message => !messages.includes(message))
      });
    };
    this.openImageGallery = ({
      messages,
      requesterNode = null,
      selectedAttachmentUrl
    }) => {
      this.state.partialNext({
        messages,
        requesterNode,
        selectedAttachmentUrl
      });
    };
    this.subscribeToMessages = () => {
      var unsubscribe = this.state.subscribeWithSelector(currentValue => ({
        messages: currentValue.messages
      }), () => {
        var assets = this.assets;
        this.state.partialNext({
          assets
        });
      });
      return unsubscribe;
    };
    this.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 ?? ''));
        this.currentIndex = index === -1 ? 0 : index;
      });
      return unsubscribe;
    };
    this.registerSubscriptions = () => {
      var subscriptions = [];
      subscriptions.push(this.subscribeToMessages());
      subscriptions.push(this.subscribeToSelectedAttachmentUrl());
      return () => {
        subscriptions.forEach(subscription => subscription());
        this.videoPlayerPool.clear();
      };
    };
    this.clear = () => {
      this.videoPlayerPool.clear();
      this.state.partialNext(INITIAL_STATE);
      this.currentIndexShared.value = INITIAL_STATE.currentIndex;
    };
    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);
  }
  return (0, _createClass2.default)(ImageGalleryStateStore, [{
    key: "messages",
    get: function () {
      return this.state.getLatestValue().messages;
    },
    set: function (messages) {
      this.state.partialNext({
        messages
      });
    }
  }, {
    key: "selectedAttachmentUrl",
    get: function () {
      return this.state.getLatestValue().selectedAttachmentUrl;
    },
    set: function (selectedAttachmentUrl) {
      this.state.partialNext({
        selectedAttachmentUrl
      });
    }
  }, {
    key: "requesterNode",
    get: function () {
      return this.state.getLatestValue().requesterNode;
    },
    set: function (requesterNode) {
      this.state.partialNext({
        requesterNode
      });
    }
  }, {
    key: "attachmentsWithMessage",
    get: function () {
      var messages = this.messages;
      var attachmentsWithMessage = messages.map(message => ({
        attachments: message.attachments ?? [],
        message
      })).filter(({
        attachments
      }) => attachments.some(attachment => {
        if (!attachment) {
          return false;
        }
        return isViewableImageAttachment(attachment) || isViewableVideoAttachment(attachment) || isViewableGiphyAttachment(attachment);
      }));
      return attachmentsWithMessage;
    }
  }, {
    key: "getAssetId",
    value: function getAssetId(messageId, assetUrl) {
      return `photoId-${messageId}-${assetUrl}`;
    }
  }, {
    key: "assets",
    get: function () {
      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 assetUrl = (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(attachment, giphyVersion);
          var assetId = this.getAssetId(message?.id ?? '', assetUrl);
          var giphyURL = attachment.giphy?.[giphyVersion]?.url || attachment.thumb_url || attachment.image_url;
          var giphyMimeType = (0, _getGiphyMimeType.getGiphyMimeType)(giphyURL ?? '');
          return {
            channelId: message?.cid,
            created_at: message?.created_at,
            id: assetId,
            messageId: 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?.user,
            user_id: message?.user_id
          };
        });
      });
    }
  }, {
    key: "currentIndex",
    set: function (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();
        }
      }
    }
  }]);
}();
//# sourceMappingURL=image-gallery-state-store.js.map