client/src/actions/show.js

@@ -1,10 +1,5 @@
 import * as actions from '../constants/show_action_types';
-import {
+import { ASSET_DETAILS, ASSET_LITE, CHANNEL, SPECIAL_ASSET } from '../constants/show_request_types';
-  ASSET_DETAILS,
-  ASSET_LITE,
-  CHANNEL,
-  SPECIAL_ASSET,
-} from '../constants/show_request_types';
 
 // basic request parsing
 export function onHandleShowPageUri(params, url) {
@@ -163,3 +158,11 @@ export function updateDisplayAssetError (error) {
     data: error,
   };
 }
+
+// viewer settings
+export function toggleDetailsExpanded(isExpanded) {
+  return {
+    type: actions.TOGGLE_DETAILS_EXPANDED,
+    data: isExpanded,
+  };
+}

client/src/constants/show_action_types.js

@@ -24,3 +24,4 @@ export const CHANNEL_CLAIMS_UPDATE_SUCCEEDED = 'CHANNEL_CLAIMS_UPDATE_SUCCEEDED'
 export const FILE_REQUESTED = 'FILE_REQUESTED';
 export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
 export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';
+export const TOGGLE_DETAILS_EXPANDED = 'TOGGLE_DETAILS_EXPANDED';

client/src/pages/ShowAssetDetails/index.js

@@ -1,11 +1,25 @@
 import { connect } from 'react-redux';
-import { selectAsset } from '../../selectors/show';
+import { selectAsset, selectDetailsExpanded } from '../../selectors/show';
+import { toggleDetailsExpanded } from '../../actions/show';
+
 import View from './view';
 
-const mapStateToProps = ({ show }) => {
+const mapStateToProps = state => {
   return {
-    asset: selectAsset(show),
+    asset: selectAsset(state.show),
+    detailsExpanded: selectDetailsExpanded(state),
   };
 };
 
-export default connect(mapStateToProps, null)(View);
+const mapDispatchToProps = dispatch => {
+  return {
+    onToggleDetailsExpanded: value => {
+      dispatch(toggleDetailsExpanded(value));
+    },
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(View);

client/src/pages/ShowAssetDetails/view.jsx

@@ -11,24 +11,15 @@ class ShowAssetDetails extends React.Component {
 
   constructor (props) {
     super(props);
-    this.collapse = this.collapse.bind(this);
+    this.toggleExpandDetails = this.toggleExpandDetails.bind(this);
-    // this.storageKey = 'vert-split-state-' + this.props.name;
-    // const closed = window && window.localStorage
-    //   ? !!window.localStorage.getItem(this.storageKey) : false;
-    const closed = true;
-    this.state = { closed: closed };
   }
 
-  collapse () {
+  toggleExpandDetails () {
-    this.setState({ closed: !this.state.closed });
+    this.props.onToggleDetailsExpanded(!this.props.detailsExpanded);
-    // if (window && window.localStorage) {
-    //   window.localStorage.setItem(this.storageKey, !this.state.closed);
-    // }
-    // document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
   }
 
   render () {
-    const { asset } = this.props;
+    const { asset, detailsExpanded } = this.props;
     if (asset) {
       const { claimData: { name, blocked } } = asset;
       if (!blocked) {
@@ -37,16 +28,16 @@ class ShowAssetDetails extends React.Component {
             pageTitle={`${name} - details`}
             asset={asset}
           >
-            <div className="asset-main">
+            <div className='asset-main'>
               <AssetTitle />
               <AssetDisplay />
               <div>
-                <button className='collapse-button' onClick={this.collapse}>
+                <button className='collapse-button' onClick={this.toggleExpandDetails}>
-                  {this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
+                  {detailsExpanded ? <Icon.MinusCircle /> : <Icon.PlusCircle className='plus-icon' /> }
                 </button>
               </div>
             </div>
-            {!this.state.closed && <AssetInfo />}
+            {detailsExpanded && <AssetInfo />}
 
           </PageLayout>
         );

client/src/reducers/show.js

@@ -14,6 +14,7 @@ const initialState = {
     error: null,
     status: LOCAL_CHECK,
   },
+  detailsExpanded: true,
 };
 
 export default function(state = initialState, action) {
@@ -117,9 +118,13 @@ export default function (state = initialState, action) {
     case actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED:
       return Object.assign({}, state, {
         channelList: Object.assign({}, state.channelList, {
-          [action.data.channelListId]: Object.assign({}, state.channelList[action.data.channelListId], {
+          [action.data.channelListId]: Object.assign(
+            {},
+            state.channelList[action.data.channelListId],
+            {
               claimsData: action.data.claimsData,
-          }),
+            }
+          ),
         }),
       });
     // display an asset
@@ -136,6 +141,11 @@ export default function (state = initialState, action) {
           status: ERROR,
         }),
       });
+    case actions.TOGGLE_DETAILS_EXPANDED:
+      return {
+        ...state,
+        detailsExpanded: action.data,
+      };
     default:
       return state;
   }

client/src/selectors/show.js

@@ -10,6 +10,10 @@ export const selectAsset = show => {
   return asset;
 };
 
-export const selectShowState = (state) => {
+export const selectShowState = state => {
   return state.show;
 };
+
+export const selectDetailsExpanded = state => {
+  return state.show.detailsExpanded;
+};

server/render/renderFullPage.js

@@ -14,6 +14,7 @@ module.exports = (helmet, html, preloadedState) => {
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
             <meta http-equiv="X-UA-Compatible" content="ie=edge">
+            <meta name="google-site-verification" content="U3240KfVplLZSRCcOHxGuDFQO6eVUXKeFsSD2WJvdLo" />
             <!--helmet-->
             ${helmet.title.toString()}
             ${helmet.meta.toString()}
@@ -27,7 +28,10 @@ module.exports = (helmet, html, preloadedState) => {
         <body>
             <div id="react-app">${html}</div>
             <script>
-                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}
+                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
+                  /</g,
+                  '\\\u003c'
+                )}
             </script>
             <script src="/bundle/bundle.js?${shortBundleHash}"></script>
         </body>