tp 3.1

ikit · Nov 8, 2018 · b16930b · b16930b
1 parent 9c6e9c0
commit b16930b
Show file tree

Hide file tree

Showing 12 changed files with 22,763 additions and 940 deletions.
diff --git a/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/.babelrc b/formations/ReacJs by Kumquats/1.1-ui-framework/demarrage/.babelrc
@@ -0,0 +1,3 @@
+ {
+ 	"presets": ["@babel/env"]
+ }
diff --git a/...ations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/site/web/js/app.bundle.js b/...ations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/site/web/js/app.bundle.js
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/.babelrc b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/.babelrc
@@ -1,3 +1,3 @@
 {
-	"presets": ["@babel/preset-env"]
+	"presets": ["@babel/preset-env", "@babel/preset-react"]
 }
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/index.html b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/index.html
@@ -6,6 +6,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
-	<script src="build/app.bundle.js"></script>
+	<div id="appContainer" style="float:left; width: 50%">
+	</div>
+	<div id="appList" style="float:right; width: 50%">
+	</div>
+	<script src="../site/web/js/app.bundle.js"></script>
 </body>
 </html>
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/VideoDetail.js b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/VideoDetail.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import videos from './videos';
+
+class VideoDetail extends React.Component {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            video: videos[ 0 ]
+        }
+    }
+
+    render() {
+        return (
+            <div className="row marketing">
+                <div className="col-sm-12 col-md-12">
+                    <div className="video-detail">
+                        <div className="caption">
+                            <video
+                                style={{ width: '100%', backgroundColor: 'black'}}
+                                height="300"
+                                controls
+                                src={this.state.video.file}
+                            >
+                            </video>
+                            <h3>{this.state.video.title}</h3>
+                            {
+                                this.state.video.description &&
+                                <p>{this.state.video.description}</p>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>            
+        )
+    }
+
+    componentDidMount() {
+        setInterval( () => {
+            const index = videos.findIndex( video  => this.state.video.id == video.id );
+            this.setState( { video: videos[ index + 1 == videos.length ? 0 : ( index + 1 ) ] } );
+        }, 2000 );
+    }
+}
+
+export default VideoDetail;
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/VideoList.js b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/VideoList.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import videos from './videos';
+
+class VideoList extends React.Component {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            videos: videos
+        }
+    }
+
+    render() {
+        return (
+            <div className="row marketing">
+                <div className="col-lg-12">
+                    <ul className="media-list">
+                        {this.state.videos.map( video => (
+                            <li className="media">
+                                <div className="media-left">
+                                    <img className="media-object"
+                                        alt="cat" src={video.thumbnail}
+                                        width="246"
+                                        height="138" />
+                                </div>
+                                <div className="media-body">
+                                    <h4 className="media-heading">{video.title}</h4>
+                                    <p>{video.description}</p>
+                                </div>
+                            </li>                            
+                        ) )}
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        setInterval( () => {
+            const index = this.state.videos.length + 1;
+            this.setState( {
+                videos: [ 
+                    {
+                        id: index,
+                        title: 'Ma vidéo ' + index,
+                        description: 'Ceci est une super vidéo',
+                        file: `uploads/video${index}.mp4`,
+                        thumbnail: `uploads/thumbnails/video${index}.jpg`,
+                    },
+                    ...this.state.videos
+                ]
+            } )
+        }, 5000 );
+    }
+}
+
+export default VideoList;
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/app.js b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/app.js
@@ -1,3 +1,9 @@
-import helloWorld from './helloWorld';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import VideoDetail from './VideoDetail';
+import VideoList from './VideoList';
 
-helloWorld();
+ReactDOM.render(
+   <VideoList />,
+   document.querySelector( '#appContainer' ) 
+);
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/helloWorld.js b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/helloWorld.js
diff --git a/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/videos.js b/formations/ReacJs by Kumquats/3.1-react-youtube-bootstrap/demarrage/src/js/videos.js
@@ -0,0 +1,23 @@
+export default [
+    {
+        id: 1,
+        title: 'Ma vidéo 1',
+        description: 'Ceci est une super vidéo',
+        file: 'uploads/video1.mp4',
+        thumbnail: 'uploads/thumbnails/video1.jpg'
+    },
+    {
+        id: 2,
+        title: 'Ma vidéo 2',
+        description: 'Ceci est une super vidéo',
+        file: 'uploads/video2.mp4',
+        thumbnail: 'uploads/thumbnails/video2.jpg'
+    },
+    {
+        id: 3,
+        title: 'Ma vidéo 3',
+        description: 'Ceci est une super vidéo',
+        file: 'uploads/video3.mp4',
+        thumbnail: 'uploads/thumbnails/video3.jpg'
+    }
+]