Add server3

.gitignore

@@ -1,6 +1,11 @@
+.idea
+
 *.css
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+keys.js
+.idea
+
 # dependencies
 /node_modules
 
@@ -20,3 +25,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea/workspace.xml
+.idea/misc.xml
+.idea/workspace.xml
+.idea/youtube-react.iml

README.md

@@ -1,3 +1,63 @@
+# task assignment guide
+- pick a task & use ~~strikeout~~ to assign it to yourself
+- when complete, document it well!
+- (if code) create new branch named after task
+      - ask someone to code-review
+      - merge into main branch
+- move item from todo to current version
+
+# todos
+- background
+    - find youtube views distribution or how many vids have 1 million views in total
+- frontend
+    - ~~improve the UI - use template from figma to make it similar~~
+    - refactor code to adhere to react best practices
+    - ~~next/prev occurence, next/prev object keyboard shortcut~~
+- backend
+    - ~~find out how to use colab as backend / server, and tie GET endpoints to code cell execution~~
+    - ~~fix colab inference code~~
+    - ~~[use python 3.8](https://stackoverflow.com/questions/60775160/install-python-3-8-kernel-in-google-colaboratory)~~
+- ML
+    - ~~get range training data: a bunch of youtube videos with chapters and or highlights~~
+    - ~~check if uoft labeling suite is avail, and how to use it for polygon labeling~~
+        - ~~novel object labeling pipeline~~
+- literature review
+    - topic modeling (subititles) & visual topic modeling
+    - ~~pic to caption models~~
+    - text summarization
+
+# versions
+## 0.0.1 (current) 
+
+## 0.0.0
+- front: display highlights as colored div using dummy data
+- back: download vid, extract frames, save annotation
+
+# [API interface](https://console.developers.google.com/apis/credentials?pli=1&project=cansumcam)
+or [create your own credentials](https://console.developers.google.com/apis/credentials)
+![location](./readme/API_interface.png)
+
+# yarn scripts
+- yarn start
+    - dev server hosting react client @localhost:3000
+- yarn server
+    - dev server hosting flask server @localhost:5000
+
+# REST calls
+- localhost:5000 for dev
+    - prod TBD
+- POST a video link to be analyzed
+    - http://localhost:5000/bookmarks/?videoID=foo
+        - get back a list of occurrence ranges for all objects
+![occurence range for all objects](./readme/all_occurence_ranges.png)
+    - http://localhost:5000/bookmarks/?videoID=foo&object_name=bar
+        - specify an object
+![occurrence range for named object](./readme/obj_occurence_range.png)
+
+# videos
+App > Watch > WatchContent > VideoInfoBox
+
+
 # 1 About
 
 This repository is the source code for the epic length [Build Youtube in React](https://productioncoder.com/build-youtube-in-react-part-1/) tutorial series provided by [productioncoder.com](https://productioncoder.com).

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-slate

package.json

@@ -3,23 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
     "javascript-time-ago": "^2.0.13",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-linkify": "^1.0.0-alpha",
+    "react-player": "^2.7.2",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-test-renderer": "^16.13.1",
     "react-waypoint": "^9.0.3",
+    "react-youtube": "^7.13.1",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^1.2.0"
   },
   "scripts": {
+    "server": "python ./server/app.py",
+    "server3": "python3 ./server/app.py",
     "dev": "source .env.local && npm start",
     "start": "react-scripts start",
     "build": "react-scripts build",

public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>MyTube</title>
+    <title>CANSUMCAM</title>
   </head>
   <body>
     <noscript>

server/app.py

@@ -0,0 +1,49 @@
+# pip install pytube3 --upgrade
+
+from flask import Flask, jsonify, request
+from flask_cors import cross_origin, CORS
+# usage guide: https://flask-cors.readthedocs.io/en/latest/
+
+app = Flask(__name__)
+CORS(app)
+app.config['CORS_SUPPORTS_CREDENTIALS'] = True
+# https://stackoverflow.com/questions/61955973/issue-with-flask-cors-blocked-by-cors-policy-response-to-preflight-request-do
+# https://github.com/corydolphin/flask-cors/issues/200
+# app.config['CORS_HEADERS'] = 'Content-Type'
+
+DUMMY_DICT = {
+    'boat': [[5, 10], [30, 45]],
+    'fish': [[15, 500]],
+    'kite': [[15, 20], [50, 80]],
+    'chair': [[60, 200]]
+}
+
+
+@app.route('/')
+def hello_world():
+    return 'Hello World!'
+
+
+@app.route('/bookmarks/', methods=['GET', 'POST'])
+@cross_origin()  # enables CORS POST, for GET: response.headers.add("Access-Control-Allow-Origin", "*")
+def get_bookmarks():
+    query_parameters = request.args
+    video_ID = query_parameters.get('videoID')
+    object_name = query_parameters.get('object_name')
+
+    result = None
+    if video_ID:
+        if object_name:
+            print(f'for {object_name}')
+            result = DUMMY_DICT.get(object_name, {})
+        else:
+            print('all objects')
+            result = DUMMY_DICT
+    else:
+        # use dummy return
+        result = DUMMY_DICT
+    return jsonify(result)  # {} means not found!
+
+
+if __name__ == '__main__':
+    app.run(host="127.0.0.1",port=5000)

src/App.js

@@ -9,7 +9,12 @@ import {youtubeLibraryLoaded} from './store/actions/api';
 import Trending from './containers/Trending/Trending';
 import Search from './containers/Search/Search';
 
-const API_KEY = process.env.REACT_APP_YT_API_KEY;
+import API_KEY_YOUTUBE from './keys.js';
+
+const API_KEY = process.env.REACT_APP_YT_API_KEY || API_KEY_YOUTUBE;
+//const API_KEY = API_KEY_YOUTUBE;
+
+console.log('API key: ' + JSON.stringify(API_KEY));
 
 class App extends Component {
   render() {
@@ -24,6 +29,7 @@ class App extends Component {
       </AppLayout>
     );
   }
+
   componentDidMount() {
     this.loadYoutubeApi();
   }

src/components/Rating/Rating.js

@@ -20,15 +20,15 @@ export function Rating(props) {
   }
   return (
     <div className='rating'>
-      <div >
+      {/* <div >
         <Icon name='thumbs outline up'/>
         <span>{likeCount}</span>
       </div>
       <div >
         <Icon name='thumbs outline down'/>
         <span>{dislikeCount}</span>
       </div>
-      {rating}
+      {rating} */}
     </div>
   );
 }

src/components/RelatedVideos/NextUpVideo/NextUpVideo.js

@@ -7,11 +7,11 @@ export function NextUpVideo(props) {
   return (
     <React.Fragment>
       <div className='next-up-container'>
-        <h4>Up next</h4>
+        {/* <h4>Up next</h4>
         <div className='up-next-toggle'>
           <span>Autoplay</span>
           <Checkbox toggle defaultChecked/>
-        </div>
+        </div> */}
       </div>
       <VideoPreview horizontal={true} video={props.video} pathname='/watch' search={`?v=${props.video.id}`}/>
       <Divider/>