diff --git a/.gitignore b/.gitignore
index 11e738d57..abd490356 100644
--- a/.gitignore
+++ b/.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/*
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index ae210013d..d1b74b629 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/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 {
:
- {loggedIn &&
-
}
+ {loggedIn && (
+
+ )}
-
+
+
{/* the highlightedComment is isolated after the user followed a permalink */}
diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js
index 5838619cd..ff65f3351 100644
--- a/plugins/coral-plugin-offtopic/client/index.js
+++ b/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,
diff --git a/plugins/coral-plugin-viewing-options/client/.babelrc b/plugins/coral-plugin-viewing-options/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/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"
+ ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-viewing-options/client/.eslintrc.json b/plugins/coral-plugin-viewing-options/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/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"] }]
+ }
+}
diff --git a/client/coral-embed-stream/src/components/ViewingOptions.css b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
similarity index 100%
rename from client/coral-embed-stream/src/components/ViewingOptions.css
rename to plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
diff --git a/client/coral-embed-stream/src/components/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
similarity index 71%
rename from client/coral-embed-stream/src/components/ViewingOptions.js
rename to plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
index 48cc10c5d..0a251fd13 100644
--- a/client/coral-embed-stream/src/components/ViewingOptions.js
+++ b/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;
\ No newline at end of file
diff --git a/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js
new file mode 100644
index 000000000..444fc1166
--- /dev/null
+++ b/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);
diff --git a/plugins/coral-plugin-viewing-options/client/index.js b/plugins/coral-plugin-viewing-options/client/index.js
new file mode 100644
index 000000000..ad2574558
--- /dev/null
+++ b/plugins/coral-plugin-viewing-options/client/index.js
@@ -0,0 +1,7 @@
+import ViewingOptions from './containers/ViewingOptions';
+
+export default {
+ slots: {
+ streamBox: [ViewingOptions]
+ }
+};
diff --git a/plugins/coral-plugin-viewing-options/index.js b/plugins/coral-plugin-viewing-options/index.js
new file mode 100644
index 000000000..a09954537
--- /dev/null
+++ b/plugins/coral-plugin-viewing-options/index.js
@@ -0,0 +1 @@
+module.exports = {};
\ No newline at end of file