react-insta-stories - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

dist/index.es.js

@@ -247,2 +247,3 @@ import React, { Component } from 'react';
     };
+    _this.getStoryContent = _this.getStoryContent.bind(_this);
     return _this;
@@ -280,20 +281,27 @@ }
   }, {
+    key: 'getStoryContent',
+    value: function getStoryContent() {
+      var _this3 = this;
+
+      var source = _typeof(this.props.story) === 'object' ? this.props.story.url : this.props.story;
+      var storyContentStyles = this.props.story.styles || this.props.storyContentStyles || styles$1.storyContent;
+      var type = this.props.story.type === 'video' ? 'video' : 'image';
+      return type === 'image' ? React.createElement('img', {
+        style: storyContentStyles,
+        src: source,
+        onLoad: this.imageLoaded
+      }) : type === 'video' ? React.createElement('video', { ref: function ref(r) {
+          _this3.vid = r;
+        }, style: storyContentStyles, src: source, controls: false, onLoadedData: this.videoLoaded, autoPlay: true }) : null;
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
-      var source = _typeof(this.props.story) === 'object' ? this.props.story.url : this.props.story;
       var isHeader = _typeof(this.props.story) === 'object' && this.props.story.header;
-      var type = this.props.story.type === 'video' ? 'video' : 'image';
-      var storyContentStyles = this.props.story.styles || this.props.storyContentStyles || styles$1.storyContent;
       return React.createElement(
         'div',
         { style: _extends({}, styles$1.story, { width: this.props.width, height: this.props.height }) },
-        type === 'image' ? React.createElement('img', {
-          style: storyContentStyles,
-          src: source,
-          onLoad: this.imageLoaded
-        }) : type === 'video' ? React.createElement('video', { ref: function ref(r) {
-            _this3.vid = r;
-          }, style: storyContentStyles, src: source, controls: false, onLoadedData: this.videoLoaded, autoPlay: true }) : null,
+        this.getStoryContent(),
         isHeader && React.createElement(
@@ -303,3 +311,3 @@ 'div',
           this.props.header ? function () {
-            return _this3.props.header(_this3.props.story.header);
+            return _this4.props.header(_this4.props.story.header);
           } : React.createElement(header, { heading: this.props.story.header.heading, subheading: this.props.story.header.subheading, profileImage: this.props.story.header.profileImage })
@@ -514,18 +522,2 @@ ),
 
-    _this.wait = function (time) {
-      return new Promise(function (resolve) {
-        _this.setState({ count: 0 });
-        var id = setInterval(function () {
-          if (_this.state.count < time) {
-            if (!_this.state.pause) {
-              _this.setState({ count: _this.state.count + 1 });
-            }
-          } else {
-            clearInterval(id);
-            resolve();
-          }
-        }, 1);
-      });
-    };
-
     _this.pause = function (action, bufferAction) {
@@ -574,2 +566,9 @@ _this.setState({ pause: action === 'pause', bufferAction: bufferAction });
 
+    _this.toggleMore = function (show) {
+      if (_this.story) {
+        _this.story.toggleMore(show);
+        return true;
+      } else return false;
+    };
+
     _this.state = {
@@ -591,16 +590,3 @@ currentId: 0,
       this.props.defaultInterval && (this.defaultInterval = this.props.defaultInterval);
-      // this.start()
     }
-
-    // start = async () => {
-    //   while (this.state.currentId < this.props.stories.length - 1) {
-    //     let curr = this.state.currentId + 1
-    //     this.setState({ currentId: curr })
-    //     let interval = this.props.stories[curr].duration
-    //     await this.wait(interval || this.defaultInterval).then(() => {
-    //       this.state.currentId < this.props.stories.length - 1 && this.setState({count: 0})
-    //     })
-    //   }
-    // }
-
   }, {
@@ -627,2 +613,5 @@ key: 'render',
         React.createElement(Story, {
+          ref: function ref(s) {
+            return _this2.story = s;
+          },
           action: this.pause,
@@ -690,5 +679,12 @@ bufferAction: this.state.bufferAction,
 
-  function ReactInstaStories() {
+  function ReactInstaStories(props) {
     classCallCheck(this, ReactInstaStories);
-    return possibleConstructorReturn(this, (ReactInstaStories.__proto__ || Object.getPrototypeOf(ReactInstaStories)).apply(this, arguments));
+
+    var _this = possibleConstructorReturn(this, (ReactInstaStories.__proto__ || Object.getPrototypeOf(ReactInstaStories)).call(this, props));
+
+    _this.pause = _this.pause.bind(_this);
+    _this.play = _this.play.bind(_this);
+    _this.previous = _this.previous.bind(_this);
+    _this.next = _this.next.bind(_this);
+    return _this;
   }
@@ -707,4 +703,45 @@
   }, {
+    key: 'pause',
+    value: function pause() {
+      if (this.c) {
+        this.c.pause('pause');
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'play',
+    value: function play() {
+      if (this.c) {
+        this.c.pause('play');
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'previous',
+    value: function previous() {
+      if (this.c) {
+        this.c.previous();
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'next',
+    value: function next() {
+      if (this.c) {
+        this.c.next();
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'toggleSeeMore',
+    value: function toggleSeeMore(show) {
+      if (this.c) {
+        return this.c.toggleMore(show);
+      } else return false;
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       return React.createElement(
@@ -714,2 +751,5 @@ 'div',
         React.createElement(Container, {
+          ref: function ref(c) {
+            return _this2.c = c;
+          },
           stories: this.props.stories,
@@ -716,0 +756,0 @@ defaultInterval: this.props.defaultInterval,

dist/index.js

@@ -252,2 +252,3 @@ 'use strict';
     };
+    _this.getStoryContent = _this.getStoryContent.bind(_this);
     return _this;
@@ -285,20 +286,27 @@ }
   }, {
+    key: 'getStoryContent',
+    value: function getStoryContent() {
+      var _this3 = this;
+
+      var source = _typeof(this.props.story) === 'object' ? this.props.story.url : this.props.story;
+      var storyContentStyles = this.props.story.styles || this.props.storyContentStyles || styles$1.storyContent;
+      var type = this.props.story.type === 'video' ? 'video' : 'image';
+      return type === 'image' ? React__default.createElement('img', {
+        style: storyContentStyles,
+        src: source,
+        onLoad: this.imageLoaded
+      }) : type === 'video' ? React__default.createElement('video', { ref: function ref(r) {
+          _this3.vid = r;
+        }, style: storyContentStyles, src: source, controls: false, onLoadedData: this.videoLoaded, autoPlay: true }) : null;
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
-      var source = _typeof(this.props.story) === 'object' ? this.props.story.url : this.props.story;
       var isHeader = _typeof(this.props.story) === 'object' && this.props.story.header;
-      var type = this.props.story.type === 'video' ? 'video' : 'image';
-      var storyContentStyles = this.props.story.styles || this.props.storyContentStyles || styles$1.storyContent;
       return React__default.createElement(
         'div',
         { style: _extends({}, styles$1.story, { width: this.props.width, height: this.props.height }) },
-        type === 'image' ? React__default.createElement('img', {
-          style: storyContentStyles,
-          src: source,
-          onLoad: this.imageLoaded
-        }) : type === 'video' ? React__default.createElement('video', { ref: function ref(r) {
-            _this3.vid = r;
-          }, style: storyContentStyles, src: source, controls: false, onLoadedData: this.videoLoaded, autoPlay: true }) : null,
+        this.getStoryContent(),
         isHeader && React__default.createElement(
@@ -308,3 +316,3 @@ 'div',
           this.props.header ? function () {
-            return _this3.props.header(_this3.props.story.header);
+            return _this4.props.header(_this4.props.story.header);
           } : React__default.createElement(header, { heading: this.props.story.header.heading, subheading: this.props.story.header.subheading, profileImage: this.props.story.header.profileImage })
@@ -519,18 +527,2 @@ ),
 
-    _this.wait = function (time) {
-      return new Promise(function (resolve) {
-        _this.setState({ count: 0 });
-        var id = setInterval(function () {
-          if (_this.state.count < time) {
-            if (!_this.state.pause) {
-              _this.setState({ count: _this.state.count + 1 });
-            }
-          } else {
-            clearInterval(id);
-            resolve();
-          }
-        }, 1);
-      });
-    };
-
     _this.pause = function (action, bufferAction) {
@@ -579,2 +571,9 @@ _this.setState({ pause: action === 'pause', bufferAction: bufferAction });
 
+    _this.toggleMore = function (show) {
+      if (_this.story) {
+        _this.story.toggleMore(show);
+        return true;
+      } else return false;
+    };
+
     _this.state = {
@@ -596,16 +595,3 @@ currentId: 0,
       this.props.defaultInterval && (this.defaultInterval = this.props.defaultInterval);
-      // this.start()
     }
-
-    // start = async () => {
-    //   while (this.state.currentId < this.props.stories.length - 1) {
-    //     let curr = this.state.currentId + 1
-    //     this.setState({ currentId: curr })
-    //     let interval = this.props.stories[curr].duration
-    //     await this.wait(interval || this.defaultInterval).then(() => {
-    //       this.state.currentId < this.props.stories.length - 1 && this.setState({count: 0})
-    //     })
-    //   }
-    // }
-
   }, {
@@ -632,2 +618,5 @@ key: 'render',
         React__default.createElement(Story, {
+          ref: function ref(s) {
+            return _this2.story = s;
+          },
           action: this.pause,
@@ -695,5 +684,12 @@ bufferAction: this.state.bufferAction,
 
-  function ReactInstaStories() {
+  function ReactInstaStories(props) {
     classCallCheck(this, ReactInstaStories);
-    return possibleConstructorReturn(this, (ReactInstaStories.__proto__ || Object.getPrototypeOf(ReactInstaStories)).apply(this, arguments));
+
+    var _this = possibleConstructorReturn(this, (ReactInstaStories.__proto__ || Object.getPrototypeOf(ReactInstaStories)).call(this, props));
+
+    _this.pause = _this.pause.bind(_this);
+    _this.play = _this.play.bind(_this);
+    _this.previous = _this.previous.bind(_this);
+    _this.next = _this.next.bind(_this);
+    return _this;
   }
@@ -712,4 +708,45 @@
   }, {
+    key: 'pause',
+    value: function pause() {
+      if (this.c) {
+        this.c.pause('pause');
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'play',
+    value: function play() {
+      if (this.c) {
+        this.c.pause('play');
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'previous',
+    value: function previous() {
+      if (this.c) {
+        this.c.previous();
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'next',
+    value: function next() {
+      if (this.c) {
+        this.c.next();
+        return true;
+      } else return false;
+    }
+  }, {
+    key: 'toggleSeeMore',
+    value: function toggleSeeMore(show) {
+      if (this.c) {
+        return this.c.toggleMore(show);
+      } else return false;
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       return React__default.createElement(
@@ -719,2 +756,5 @@ 'div',
         React__default.createElement(Container, {
+          ref: function ref(c) {
+            return _this2.c = c;
+          },
           stories: this.props.stories,
@@ -721,0 +761,0 @@ defaultInterval: this.props.defaultInterval,

package.json

 {
   "name": "react-insta-stories",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A React component for Instagram like stories",
@@ -28,3 +28,4 @@ "author": "mohitk05",
     "predeploy": "cd ghpage && npm install && npm run build",
-    "deploy": "gh-pages -d ghpage/build"
+    "deploy": "gh-pages -d ghpage/build",
+    "postinstall": "opencollective-postinstall"
   },
@@ -69,3 +70,10 @@ "peerDependencies": {
   ],
-  "dependencies": {}
-}
+  "dependencies": {
+    "opencollective-postinstall": "^2.0.2",
+    "opencollective": "^1.0.3"
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/react-insta-stories"
+  }
+}

README.md

@@ -5,5 +5,7 @@ ![Main image](https://i.imgur.com/JQw5hwo.jpg?2)
 
-[![NPM](https://img.shields.io/npm/v/react-insta-stories.svg)](https://www.npmjs.com/package/react-insta-stories) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Backers on Open Collective](https://opencollective.com/react-insta-stories/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-insta-stories/sponsors/badge.svg)](#sponsors) [![NPM](https://img.shields.io/npm/v/react-insta-stories.svg)](https://www.npmjs.com/package/react-insta-stories) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-⚡️ 'See more' and video playback added! Watch the demo below!
+#### Recent updates 🚀
+⚡️ APIs added to trigger changes manually
+⚡️ See More option added
 
@@ -51,3 +53,3 @@ ![Demo screenshot](https://i.imgur.com/Twvjxp5.png)
 `defaultInterval` | Number | 1200 | Milliseconds duration for which a story persists
-`loader` | Component | 'Loading..' | A loader component as a fallback until image loads from url
+`loader` | Component | Ripple loader | A loader component as a fallback until image loads from url
 `header` | Component | Default header as in demo | A header component which sits at the top of each story. It receives the `header` object from the `story` object. Data for header to be sent with each story object.
@@ -82,4 +84,50 @@ `width` | Number | 360 | Width of the component in pixels
 
+## API
+Following functions can be accessed using the `ref` of default export, e.g. `this.stories.pause()`
+
+##### `pause(overrideHideProgress: Boolean)`
+Pause the currently playing story. Pass `true` to override the default hiding of progress bars.
+
+##### `play()`
+Play a paused story.
+
+##### `previous()`
+Jump to the previous story. Similar to when tapped on left side of the screen.
+
+##### `next()`
+Jump to the next story. Similar to when tapped on right side of the screen.
+
+##### `toggleSeeMore(show: Boolean)`
+Show or hide the `Show More` component. Pass `true` to show and otherwise.
+
+## Contributors
+
+This project exists thanks to all the people who contribute. 
+<a href="https://github.com/mohitk05/react-insta-stories/graphs/contributors"><img src="https://opencollective.com/react-insta-stories/contributors.svg?width=890&button=false" /></a>
+
+
+## Backers
+
+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/react-insta-stories#backer)
+
+<a href="https://opencollective.com/react-insta-stories#backers" target="_blank"><img src="https://opencollective.com/react-insta-stories/backers.svg?width=890"></a>
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. [Become a sponsor](https://opencollective.com/react-insta-stories#sponsor)
+
+<a href="https://opencollective.com/react-insta-stories/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/react-insta-stories/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-insta-stories/sponsor/9/avatar.svg"></a>
+
 ## License
 
 MIT © [mohitk05](https://github.com/mohitk05)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136866

increased by4.92%

Lines of code

1431

increased by5.61%

Number of lines in readme file

131

increased by57.83%

Worsened metrics

Dependency count

5

increased by66.67%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedopencollective@^1.0.3

• + Addedopencollective-postinstall@^2.0.2

• + Addedansi-escapes@1.4.0(transitive)

• + Addedansi-regex@2.1.13.0.1(transitive)

• + Addedansi-styles@2.2.1(transitive)

• + Addedbabel-polyfill@6.23.0(transitive)

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedchalk@1.1.3(transitive)

• + Addedchardet@0.4.2(transitive)

• + Addedcli-cursor@2.1.0(transitive)

• + Addedcli-width@2.2.1(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedexternal-editor@2.2.0(transitive)

• + Addedfigures@2.0.0(transitive)

• + Addedhas-ansi@2.0.0(transitive)

• + Addediconv-lite@0.4.240.6.3(transitive)

• + Addedinquirer@3.0.6(transitive)

• + Addedis-fullwidth-code-point@2.0.0(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedmimic-fn@1.2.0(transitive)

• + Addedminimist@1.2.0(transitive)

• + Addedmute-stream@0.0.7(transitive)

• + Addednode-fetch@1.6.3(transitive)

• + Addedonetime@2.0.1(transitive)

• + Addedopencollective@1.0.3(transitive)

• + Addedopencollective-postinstall@2.0.3(transitive)

• + Addedopn@4.0.2(transitive)

• + Addedos-tmpdir@1.0.2(transitive)

• + Addedpinkie@2.0.4(transitive)

• + Addedpinkie-promise@2.0.1(transitive)

• + Addedregenerator-runtime@0.10.50.11.1(transitive)

• + Addedrestore-cursor@2.0.0(transitive)

• + Addedrun-async@2.4.1(transitive)

• + Addedrx@4.1.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsignal-exit@3.0.7(transitive)

• + Addedstring-width@2.1.1(transitive)

• + Addedstrip-ansi@3.0.14.0.0(transitive)

• + Addedsupports-color@2.0.0(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedtmp@0.0.33(transitive)