Adding streamBox slot and coral-plugin-viewing-options 🎉

.gitignore

@@ -23,5 +23,6 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
 
 **/node_modules/*

client/coral-embed-stream/src/components/Stream.js

@@ -2,7 +2,6 @@ import React, {PropTypes} from 'react';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 import Comment from '../containers/Comment';
-import ViewingOptions from './ViewingOptions';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
@@ -110,14 +109,15 @@ class Stream extends React.Component {
             </div>
           : <p>{asset.settings.closedMessage}</p>}
 
-        <div className="streamBox">
-          {loggedIn &&
-            <ModerationLink
-              assetId={asset.id}
-              isAdmin={can(user, 'MODERATE_COMMENTS')}
-            />}
+        {loggedIn && (
+          <ModerationLink
+            assetId={asset.id}
+            isAdmin={can(user, 'MODERATE_COMMENTS')}
+          />
+        )}
 
-          <ViewingOptions />
+        <div className="streamBox">
+          <Slot fill="streamBox" />
         </div>
 
         {/* the highlightedComment is isolated after the user followed a permalink */}

plugins/coral-plugin-offtopic/client/index.js

@@ -4,6 +4,11 @@ import OffTopicFilter from './containers/OffTopicFilter';
 import OffTopicCheckbox from './containers/OffTopicCheckbox';
 import reducer from './reducer';
 
+/**
+ * coral-plugin-offtopic depends on coral-plugin-viewing-options
+ * in other to display filter and use the streamViewingOptions slot
+ */
+
 export default {
   translations,
   reducer,

plugins/coral-plugin-viewing-options/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/coral-plugin-viewing-options/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
 import {Icon} from 'coral-ui';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
 import styles from './ViewingOptions.css';
 import Slot from 'coral-framework/components/Slot';
-import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
 
 const ViewingOptions = (props) => {
   const toggleOpen = () => {
@@ -42,9 +39,4 @@ const ViewingOptions = (props) => {
   );
 };
 
-const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);
+export default ViewingOptions;

plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import ViewingOptions from '../components/ViewingOptions';
+import {openViewingOptions, closeViewingOptions} from 'coral-embed-stream/src/actions/stream';
+
+const mapStateToProps = ({stream}) => ({open: stream.viewingOption.open});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({openViewingOptions, closeViewingOptions}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);

plugins/coral-plugin-viewing-options/client/index.js

@@ -0,0 +1,7 @@
+import ViewingOptions from './containers/ViewingOptions';
+
+export default {
+  slots: {
+    streamBox: [ViewingOptions]
+  }
+};

plugins/coral-plugin-viewing-options/index.js

@@ -0,0 +1 @@
+module.exports = {};