recommend beta 1

Author: 3lang3

src/actions/bannerActions.js

@@ -0,0 +1,22 @@
+const CHANGE = 'BANNER/CHANGE';
+const INIT = 'BANNER/INIT';
+
+export const bannerActions = {
+    CHANGE: CHANGE,
+    INIT: INIT
+}
+
+const initBanner = (payload) => ({
+  type: INIT,
+  payload
+});
+
+const changeBanner = (payload) => ({
+  type: CHANGE,
+  payload
+});
+
+export {
+    changeBanner,
+    initBanner,
+}

src/actions/index.js

@@ -10,4 +10,5 @@ export * from './inviteActions';
 export * from './cheeseActions';
 export * from './favoriteActions';
 export * from './onlineActions';
-export * from './recommendActions';
+export * from './recommendActions';
+export * from './bannerActions';

src/actions/recommendActions.js

@@ -2,13 +2,29 @@
 import fetch from 'isomorphic-fetch';
 import config from '../../config';
 
+import { initBanner } from 'actions'
+
 const API_HOST = `${config.HOST}:3000`
 const url = '/api/recommend';
 
 const REQUEST = 'recommend/REQUEST';
 const OK = 'recommend/OK';
 const ERROR = 'recommend/ERROR';
 
+const bannerItemsHander = (data) => {
+    let results = [];
+
+    for(let key in data) {
+            
+        let items = data[key];
+
+        if(results.length < 5) results.push(items[0])
+
+    }
+
+    return results;
+}
+
 export const recommendActions = {
   REQUEST,
   OK,
@@ -32,10 +48,13 @@ const getRecommendError = payload => ({
 
 const getRecommend = () => (dispatch) => {
   dispatch(getRecommendRequest());
-
+  
   return fetch(`${API_HOST}${url}`)
     .then(res => res.json())
-    .then(json => dispatch(getRecommendOk(json)))
+    .then(json => {
+      dispatch(initBanner(bannerItemsHander(json)))
+      dispatch(getRecommendOk(json))
+    })
     .catch(err => dispatch(getRecommendError(err)));
 };
 

src/components/Banner/Banner.css

@@ -0,0 +1,78 @@
+.banner {
+    width: 1200px;
+    height: 565px;
+    margin: 20px auto;
+    display: flex;
+    justify-content: space-between;
+
+    & * {
+        box-sizing: border-box;
+    }
+
+    & .list {
+        width: 200px;
+        background: rgba(0, 0, 0, 0.3);;
+        display: flex;
+        flex-direction: column;
+
+        & .item {
+            cursor: pointer;
+            margin-bottom: 5px;
+            overflow: hidden;
+            padding-left: 5px;
+            opacity: .5;
+
+            & img {
+                width: 100%;
+                height: 113px;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        &.active0 {
+            & .item:nth-child(1) {
+                opacity: 1;
+            }
+        }
+        &.active1 {
+            & .item:nth-child(2) {
+                opacity: 1;
+            }
+        }
+        &.active2 {
+            & .item:nth-child(3) {
+                opacity: 1;
+            }
+        }
+        &.active3 {
+            & .item:nth-child(4) {
+                opacity: 1;
+            }
+        }
+        &.active4 {
+            & .item:nth-child(5) {
+                opacity: 1;
+            }
+        }
+    }
+
+
+    & .player {
+        max-width: 1000px;
+        width: 100%;
+
+        & section:first-child {
+            padding: 0 !important;
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+}

src/components/Banner/Banner.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import ScreenItem from 'components/ScreenItem';
+import styles from './Banner.css';
+
+import { changeBanner } from 'actions';
+
+
+
+class Banner extends React.Component {
+
+    constructor(props) {
+        super(props)
+
+        this.changeBanner = this.changeBanner.bind(this)
+        
+        this.state = {
+            active: 0,
+        }
+    }
+
+    componentDidMount() {
+      
+    }
+
+    componentDidUpdate() {
+        
+    }
+
+    changeBanner(item, i) {
+        this.props.changeBanner(item)
+        this.setState({
+            active: i,
+        })
+    }
+
+
+    render() {
+        const {items: items, index: index } = this.props.banner;
+        let itemsHtml = [];
+
+        items.forEach((item, key) => {
+            itemsHtml.push(
+                <section key={`${item.roomId}`} onClick={() => this.changeBanner(item, key)} className={styles.item}>
+                    <img src={item.cover} alt={item.title} title={item.title}/>
+                </section>
+            )
+        })
+
+        
+
+        return (
+            <div className={styles.banner}>
+                <section className={styles.player}>
+                    <ScreenItem isBanner={true} item={index} screenCount={1} />
+                </section>
+                <section className={classnames(styles.list, styles[`active${this.state.active}`])}>
+                    {itemsHtml}
+                </section>
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    banner: state.banner,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    changeBanner: (item) => dispatch(changeBanner(item))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Banner);

src/components/Banner/index.js

@@ -0,0 +1,3 @@
+import Banner from './Banner'
+
+export default Banner

src/components/Recommend/Recommend.css

@@ -14,57 +14,11 @@
     }
 }
 
-.banner {
-    width: 1200px;
-    height: 565px;
-    margin: 20px auto;
-    display: flex;
-    justify-content: space-between;
-
-    & * {
-        box-sizing: border-box;
-    }
-
-    & .list {
-        width: 200px;
-        background: rgba(0, 0, 0, 0.3);;
-        display: flex;
-        flex-direction: column;
-
-        & .item {
-            cursor: pointer;
-            margin-bottom: 5px;
-            overflow: hidden;
-            padding-left: 5px;
-            opacity: .5;
-
-            & img {
-                width: 100%;
-                height: 113px;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &.active, &:hover {
-                opacity: 1;
-            }
-        }
-    }
-
-
-    & .player {
-        max-width: 1000px;
-        width: 100%;
-
-        & section:first-child {
-            padding: 0 !important;
-            height: 100%;
-            width: 100%;
-        }
-    }
-
+.outerWrapper {
+    opacity: 0;
+    animation: zoomIn 4s ease forwards;
+    width: 100%;
+    height: 100%;
 }
 
 .content {
@@ -108,4 +62,17 @@
             }
         }
     }
+}
+
+.empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes zoomIn {
+    from {opacity: 0; transform: scale(.95) }
+    to {opacity: 1; transform: scale(1)}
 }