@r3l/app
Version:
259 lines (212 loc) • 9.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _redux = require("redux");
var _reactRedux = require("react-redux");
var _text = require("../styled/text");
var _post = require("../post/post.actions");
var _post2 = require("../../utils/post");
var _numbers = require("../../utils/numbers");
var _styled = require("../styled");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var BG_COLORS = ['black', 'white'];
var Marquee = /*#__PURE__*/function (_Component) {
(0, _inherits2.default)(Marquee, _Component);
var _super = _createSuper(Marquee);
function Marquee() {
var _this;
(0, _classCallCheck2.default)(this, Marquee);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "x", []);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rows", []);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "pause", function () {
cancelAnimationFrame(_this.lastFrame);
window.removeEventListener('focus', _this.animate);
window.addEventListener('focus', _this.animate);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rowSpeed", function (i) {
switch (i % 3) {
case 0:
return 0.6;
case 1:
return 0.85;
case 2:
return 0.75;
default:
return 0.6;
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "animate", function () {
var now = new Date();
var elapsed = _this.lastTime ? (now - _this.lastTime) / 10 : 0;
_this.x = _this.rows.map(function (row, i) {
var w = row.offsetWidth / 2;
var newX = (_this.x[i] || i) - elapsed * _this.rowSpeed(i);
if (newX <= -w) newX += w;
var rX = Math.round(newX * 1000) / 1000;
row.style.transform = "translate3d(".concat(rX, "px, 0, 0)");
return rX;
});
_this.lastTime = now;
_this.lastFrame = requestAnimationFrame(_this.animate);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderTicker", function (row, key) {
var _this$props = _this.props,
posts = _this$props.posts,
rows = _this$props.rows,
communityState = _this$props.communityState;
var links = posts.topPosts.filter(function (post) {
return post.title;
});
return links.map(function (post, i) {
var _getTitle;
if (i % rows !== row) return null;
var color = BG_COLORS[(row + 1) % 2];
var community = communityState.communities[post.data.community];
if (!community) return null;
var avgRank = community.currentShares / community.postCount;
var tick = post.data.pagerank - avgRank;
var title = (_getTitle = (0, _post2.getTitle)({
post: post,
maxLength: 60
})) === null || _getTitle === void 0 ? void 0 : _getTitle.toUpperCase();
if (!title) return null;
var icon = (0, _post2.getFavIcon)(post.metaPost.domain);
var tickerString = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.Image, {
sx: {
display: 'inline-block',
bg: 'white',
width: 3,
height: 3,
mr: 1,
mb: -2.0001
},
source: icon,
resizeMode: 'contain'
}), /*#__PURE__*/_react.default.createElement(_text.Text, {
sx: {
mr: 4.001,
color: color
}
}, title), /*#__PURE__*/_react.default.createElement(_text.Text, {
sx: {
mr: 4.001,
color: tick < 0 ? 'red' : 'green'
}
}, tick >= 0 ? '▲' : '▼'), /*#__PURE__*/_react.default.createElement(_text.Text, {
sx: {
color: color
}
}, (0, _numbers.abbreviateNumber)(tick), "%"));
return /*#__PURE__*/_react.default.createElement(_styled.InlineLink, {
sx: {
display: 'inline-block'
},
key: "".concat(post._id).concat(key),
to: (0, _post2.getPostUrl)(post.data.community, post)
}, /*#__PURE__*/_react.default.createElement(_text.NumericalValue, {
sx: {
py: 2,
px: 4
}
}, tickerString));
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRow", function (row) {
var bg = BG_COLORS[row % 2];
var tickers = _this.renderTicker(row, 1);
var tickersDouble = _this.renderTicker(row, 2);
return /*#__PURE__*/_react.default.createElement(_styled.View, {
sx: {
bg: bg,
py: 4.001
},
key: "row".concat(row)
}, /*#__PURE__*/_react.default.createElement(_text.Text, {
style: {
whiteSpace: 'nowrap'
},
ref: function ref(c) {
return _this.rows[row] = c;
}
}, tickers, tickersDouble));
});
return _this;
}
(0, _createClass2.default)(Marquee, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.actions.getTopPosts();
this.animate();
window.addEventListener('blur', this.pause);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('blur', this.pause);
window.removeEventListener('focus', this.animate);
cancelAnimationFrame(this.lastFrame);
}
}, {
key: "render",
value: function render() {
var N = this.props.rows;
var rows = Array.from(Array(N).keys());
return /*#__PURE__*/_react.default.createElement(_styled.Row, {
sx: {
whiteSpace: 'nowrap',
overflow: 'hidden',
zIndex: 10,
position: 'fixed',
top: 0,
left: 0
}
}, rows.map(this.renderRow));
}
}]);
return Marquee;
}(_react.Component);
(0, _defineProperty2.default)(Marquee, "propTypes", {
rows: _propTypes.default.number,
actions: _propTypes.default.object,
posts: _propTypes.default.object,
communityState: _propTypes.default.object
});
(0, _defineProperty2.default)(Marquee, "defaultProps", {
rows: 1
});
function mapStateToProps(state) {
return {
posts: state.posts,
communityState: state.community
};
}
function mapDispatchToProps(dispatch) {
return {
actions: (0, _redux.bindActionCreators)({
getTopPosts: _post.getTopPosts
}, dispatch)
};
}
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Marquee);
exports.default = _default;
//# sourceMappingURL=post.marquee.js.map