fix the bug of stucking when open too much videos

yingshaoxo · yingshaoxo · commit c38ba27656a8 · 2020-12-04T16:35:41.000+08:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+    "MicroPython.executeButton": [
+        {
+            "text": "▶",
+            "tooltip": "Run",
+            "alignment": "left",
+            "command": "extension.executeFile",
+            "priority": 3.5
+        }
+    ],
+    "MicroPython.syncButton": [
+        {
+            "text": "$(sync)",
+            "tooltip": "sync",
+            "alignment": "left",
+            "command": "extension.execute",
+            "priority": 4
+        }
+    ]
+}
diff --git a/client/.vscode/settings.json b/client/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+    "MicroPython.executeButton": [
+        {
+            "text": "▶",
+            "tooltip": "Run",
+            "alignment": "left",
+            "command": "extension.executeFile",
+            "priority": 3.5
+        }
+    ],
+    "MicroPython.syncButton": [
+        {
+            "text": "$(sync)",
+            "tooltip": "sync",
+            "alignment": "left",
+            "command": "extension.execute",
+            "priority": 4
+        }
+    ]
+}
diff --git a/client/package.json b/client/package.json
@@ -10,6 +10,7 @@
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-dplayer": "^0.2.3",
+    "react-player": "^2.7.0",
     "react-scripts": "2.1.8"
   },
   "scripts": {
diff --git a/client/src/App.js b/client/src/App.js
@@ -12,7 +12,7 @@ class App extends Component {
           >
           </NestedList>
           <p style={{color:'grey'}}><small><small>
-              Made by <a href="https://github.com/yingshaoxo" target="_blank" style={{color:'red'}}>yingshaoxo</a>
+              Made by <a href="https://yingshaoxo.blogspot.com" target="_blank" style={{color:'red'}}>yingshaoxo</a>
           </small></small></p>
       </div>
     );
diff --git a/client/src/List.js b/client/src/List.js
@@ -195,7 +195,7 @@ class NestedList extends React.Component {
             <div>
                 <List
                     component="nav"
-                    subheader={<ListSubheader component="div">Welcome to Local Show</ListSubheader>}
+                    subheader={<ListSubheader component="div">Welcome to the Local Show</ListSubheader>}
                     className={classes.root}
                 >
                     {
diff --git a/client/src/Popup.js b/client/src/Popup.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { unmountComponentAtNode } from "react-dom";
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -9,8 +10,9 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import withMobileDialog from '@material-ui/core/withMobileDialog';
 
 import DPlayer from "react-dplayer";
+import ReactPlayer from 'react-player';
 
-import {HOST} from './Const';
+import { HOST } from './Const';
 const MEDIA_BASE = HOST + 'media/'
 
 class MyVideoPlayer extends React.Component {
@@ -22,21 +24,22 @@ class MyVideoPlayer extends React.Component {
         return (
             <div>
                 {
-                    (this.state.show)?
-                        <DPlayer 
-                            video={{
-                            url: this.props.target_url
-                            }}
-                            autoplay='true'
-                            preload='metadata'
+                    (this.state.show) ?
+                        <ReactPlayer
+                            url={this.props.target_url}
+                            ref={this.props.dplayerRef}
+                            controls={true}
+                            width={"100%"}
+                            height={"80%"}
+                            playing={true}
                             onError={() => {
                                 console.log("Something went wroung...")
                                 this.setState({
                                     show: false,
                                 })
                             }}
                         />
-                    :
+                        :
                         null
                 }
             </div>
@@ -45,13 +48,42 @@ class MyVideoPlayer extends React.Component {
 }
 
 class ResponsiveDialog extends React.Component {
+    constructor(props) {
+        super(props)
+        this.dplayerRef = React.createRef()
+    }
+
     get_target_url = () => {
         var root_folder = this.props.parentState.info['root_folder']
         var path = this.props.parentState.selected_file_path
         var target_url = MEDIA_BASE + path.replace(root_folder, "")
         return target_url
     }
 
+    to_do_a_refresh = () => {
+        const API_BASE = HOST + 'api/'
+        const API_FUNCTION_GET_INFO = 'info/'
+        const API_FUNCTION_GET_FILES = 'files/'
+        const API_FUNCTION_UPDATE_FILES = 'update/'
+
+        var url = `${API_BASE}${API_FUNCTION_GET_FILES}`;
+        return fetch(url, {
+            method: "POST",
+            mode: "cors",
+            cache: "no-cache",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then(
+                response => response.json()
+            )
+            .then(result => {
+                //console.log(result)
+            })
+        //.catch(error => console.log(error));
+    }
+
     render() {
         //you can let it auto decide by setting fullScreen={fullScreen}
         const { fullScreen } = this.props;
@@ -62,39 +94,56 @@ class ResponsiveDialog extends React.Component {
                     fullScreen={false}
                     maxWidth={"lg"}
                     open={this.props.parentState.keep_popup_open}
-                    onClose={this.props.handlePopupClose}
+                    onClose={() => {
+                        try {
+                            //console.log(this.dplayerRef.current.getActivePlayer())
+                            //console.log(Object.getOwnPropertyNames(this.dplayerRef.current.getActivePlayer()))
+                            //this.dplayerRef.current.playing = false
+                            //console.log(Object.getOwnPropertyNames(this.dplayerRef.current.dp))
+                        } catch {
+                        }
+                        this.props.handlePopupClose()
+                        //this.to_do_a_refresh()
+                    }}
                     aria-labelledby="responsive-dialog-title"
                 >
-                    <DialogTitle 
+                    <DialogTitle
                         id="responsive-dialog-title"
                         style={{
                             wordWrap: 'break-word',
                         }}
                     >
                         {this.props.parentState.selected_file_name}
                     </DialogTitle>
-                    <DialogContent>
+                    <DialogContent
+                        style={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center"
+                        }}
+                    >
                         <MyVideoPlayer
+                            dplayerRef={this.dplayerRef}
                             target_url={this.get_target_url()}
                         />
                     </DialogContent>
                     <DialogActions>
-                        <Button 
+                        <Button
                             onClick={() => {
                                 console.log(this.get_target_url())
                                 window.open(this.get_target_url(), "_blank")
-                            }} 
-                            color="primary" 
+                            }}
+                            color="primary"
                         >
-                            Download 
+                            Download
                         </Button>
-                        <Button 
+                        <Button
                             onClick={() => {
                                 var file_url = this.get_target_url().replace("https://", "").replace("http://", "")
                                 var intent_url = `intent://${file_url}#Intent;action=android.intent.action.VIEW;scheme=http;type=video/mp4;end`
                                 window.open(intent_url, "_blank")
-                            }} 
-                            color="primary" 
+                            }}
+                            color="primary"
                             autoFocus
                         >
                             Play
@@ -110,4 +159,4 @@ ResponsiveDialog.propTypes = {
     fullScreen: PropTypes.bool.isRequired,
 };
 
-export default withMobileDialog({breakpoint: 'xm'})(ResponsiveDialog);
+export default withMobileDialog({ breakpoint: 'xm' })(ResponsiveDialog);
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -3119,6 +3119,11 @@ deepmerge@^3.0.0:
   resolved "http://registry.npm.taobao.org/deepmerge/download/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
   integrity sha1-WO9GOlfAjTdlR/iGn9xbzulX9E4=
 
+deepmerge@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^2.6.0:
   version "2.7.2"
   resolved "http://registry.npm.taobao.org/default-gateway/download/default-gateway-2.7.2.tgz#b7ef339e5e024b045467af403d50348db4642d0f"
@@ -6211,6 +6216,11 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -6409,6 +6419,11 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "http://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8161,7 +8176,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "http://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -8436,6 +8451,11 @@ react-event-listener@^0.6.2:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1:
   version "16.8.4"
   resolved "http://registry.npm.taobao.org/react-is/download/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
@@ -8446,6 +8466,17 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   resolved "http://registry.npm.taobao.org/react-lifecycles-compat/download/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha1-TxonOv38jzSIqMUWv9p4+HI1I2I=
 
+react-player@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.7.0.tgz#7f25c83b6111770adbae51679f7ad27fb0fa0269"
+  integrity sha512-S+d9EfFCb2UlDBKf5U8jTgVQI3QCRfZ8k7kFUgpYLrSjLuowdV/NyZAKprplUNJEho1LmdwtqsDKg21kMIVymw==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-scripts@2.1.8:
   version "2.1.8"
   resolved "http://registry.npm.taobao.org/react-scripts/download/react-scripts-2.1.8.tgz#21195bb928b2c0462aa98b2d32edf7d034cff2a9"
diff --git a/src/main.go b/src/main.go
@@ -11,7 +11,6 @@ import (
 	"time"
 
 	"github.com/gin-contrib/cors"
-	"github.com/gin-gonic/contrib/static"
 	"github.com/gin-gonic/gin"
 	"github.com/mdp/qrterminal"
 
@@ -59,7 +58,8 @@ func main() {
 	router.StaticFS("/ui/", box.HTTPBox())
 
 	// Serve target files
-	router.Use(static.Serve("/media", static.LocalFile(MEDIA_PATH, true)))
+	//router.Use(static.Serve("/media", static.LocalFile(MEDIA_PATH, true)))
+	router.StaticFS("/media", http.Dir(MEDIA_PATH))
 
 	// Setup route group for the API
 	api := router.Group("/api/")
@@ -80,6 +80,7 @@ func main() {
 		api.Any("files/", func(c *gin.Context) {
 			//whatever := c.Query("name")
 			c.JSON(http.StatusOK, file_dict)
+			runtime.GC()
 		})
 	}
 
@@ -116,5 +117,15 @@ func main() {
 	}()
 
 	// Start and run the server
-	router.Run(":5000")
+	//router.Run(":5000")
+
+	s := &http.Server{
+		Addr:           ":5000",
+		Handler:        router,
+		ReadTimeout:    1 * time.Second,
+		WriteTimeout:   1 * time.Second,
+		IdleTimeout:    1 * time.Second,
+		MaxHeaderBytes: 1 << 20,
+	}
+	s.ListenAndServe()
 }
diff --git a/src/rice-box.go b/src/rice-box.go

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ class App extends Component {`
`12`	`12`	`>`
`13`	`13`	`</NestedList>`
`14`	`14`	`<p style={{color:'grey'}}><small><small>`
`15`		`- Made by <a href="https://github.com/yingshaoxo" target="_blank" style={{color:'red'}}>yingshaoxo</a>`
	`15`	`+ Made by <a href="https://yingshaoxo.blogspot.com" target="_blank" style={{color:'red'}}>yingshaoxo</a>`
`16`	`16`	`</small></small></p>`
`17`	`17`	`</div>`
`18`	`18`	`);`
Original file line number	Diff line number	Diff line change
`@@ -195,7 +195,7 @@ class NestedList extends React.Component {`
`195`	`195`	`<div>`
`196`	`196`	`<List`
`197`	`197`	`component="nav"`
`198`		`- subheader={<ListSubheader component="div">Welcome to Local Show</ListSubheader>}`
	`198`	`+ subheader={<ListSubheader component="div">Welcome to the Local Show</ListSubheader>}`
`199`	`199`	`className={classes.root}`
`200`	`200`	`>`
`201`	`201`	`{`