change file structure

ChartPlayer/FloChartPlayer/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

ChartPlayer/FloChartPlayer/.rescriptsrc.js

@@ -0,0 +1 @@
+module.exports = [require.resolve('./.webpack.config.js')]

ChartPlayer/FloChartPlayer/.webpack.config.js

@@ -0,0 +1,5 @@
+// define child rescript
+module.exports = config => {
+  config.target = 'electron-renderer';
+  return config;
+}

ChartPlayer/FloChartPlayer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Dong-Hyun Kim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ChartPlayer/FloChartPlayer/README.md

@@ -0,0 +1,3 @@
+# FloChart Player
+
+...TODO - Use YT API

ChartPlayer/FloChartPlayer/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "floChart-player",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@apollo/client": "^3.1.4",
+    "@apollo/react-hooks": "^4.0.0",
+    "antd": "^3.25.1",
+    "apollo-boost": "^0.4.9",
+    "electron-is-dev": "^1.1.0",
+    "emotion": "^10.0.23",
+    "frameless-titlebar": "^1.0.8",
+    "graphql": "^15.3.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-scripts": "3.2.0"
+  },
+  "main": "public/electron.js",
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "react-scripts eject",
+    "app": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\""
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint",
+    "extends": [
+      "airbnb"
+    ],
+    "plugins": [
+      "react",
+      "jsx-a11y",
+      "import"
+    ],
+    "rules": {
+      "linebreak-style": 0,
+      "import/no-extraneous-dependencies": 0,
+      "no-use-before-define": 0,
+      "jsx-a11y/no-static-element-interactions": 0,
+      "jsx-a11y/click-events-have-key-events": 0
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.13",
+    "@rescripts/rescript-env": "^0.0.11",
+    "axios": "^0.19.0",
+    "concurrently": "^5.0.0",
+    "electron": "^7.1.1",
+    "electron-builder": "^22.1.0",
+    "eslint": "6.1.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-hooks": "1.7.0",
+    "prettier-eslint": "^9.0.0",
+    "prop-types": "^15.7.2",
+    "wait-on": "^3.3.0"
+  }
+}

ChartPlayer/FloChartPlayer/public/electron.js

@@ -0,0 +1,45 @@
+const electron = require('electron');
+
+const { app } = electron;
+const { BrowserWindow } = electron;
+
+const path = require('path');
+const isDev = require('electron-is-dev');
+
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 900,
+    height: 680,
+    frame: false,
+    titleBarStyle: 'hidden',
+    webPreferences: {
+      nodeIntegration: true,
+      webSecurity: false,
+    },
+  });
+  mainWindow.loadURL(
+    isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`,
+  );
+  if (isDev) {
+    // Open the DevTools.
+    // BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
+    mainWindow.webContents.openDevTools();
+  }
+  mainWindow.on('closed', () => { mainWindow = null; });
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

ChartPlayer/FloChartPlayer/public/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+  <head>
+    <meta charset="UTF-8">
+    <title>FloChart Player</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

ChartPlayer/FloChartPlayer/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

ChartPlayer/FloChartPlayer/src/App.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Charting from './Components/Charting';
+
+const App = () => <Charting />;
+
+export default App;

ChartPlayer/FloChartPlayer/src/Components/Charting.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import TitleBar from 'frameless-titlebar';
+import { css } from 'emotion';
+import { Button, Menu } from 'antd';
+import SongItem from './SongItem';
+import { gql, useMutation } from '@apollo/client';
+import { useQuery } from '@apollo/react-hooks';
+
+const ADD_SONG = gql`
+  mutation AddSong($name: String!, $artist: String!, $album: String!, $img: String!) {
+    addSong(name: $name, artist: $artist, album: $album, img: $img) {
+      id
+      name
+      artist
+      album
+      img
+    }
+  }
+`;
+
+const GET_SONGLIST = gql`
+  {
+    songs {
+      rank
+      name
+      artist
+      album
+      img
+    }
+  }
+`;
+
+const Charting = () => {
+  const [addSong, { songdata }] = useMutation(ADD_SONG);
+  const [chartData, setChartData] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [isloaded, setIsLoaded] = useState(false);
+  const { loading_, error, data } = useQuery(GET_SONGLIST);
+
+  const jsonLoading = async () => {
+    const { data } = await axios.get('https://www.music-flo.com/api/meta/v1/chart/track/1');
+    setChartData(data.data);
+    console.log("ok.");
+  };
+
+  const syncLoading = () => {
+    setLoading(true);
+    setLoading(false);
+    console.log(data?.songs);
+    setIsLoaded(true);
+  };
+
+  const regenLoading = async () => {
+    chartData.trackList.forEach(song => {
+      console.log(song.name, song.artistList[0].name, song.album.title, song.album.imgList[5].url);
+      addSong({ variables: { name: song.name, artist: song.artistList[0].name, album: song.album.title, img: song.album.imgList[5].url } });
+    });
+  };
+
+  return (
+    <>
+      <TitleBar app="&nbsp;FloChart Player" />
+      <Menu mode="horizontal">
+        <Menu.Item disabled>
+          <Button type="primary" loading={loading} onClick={syncLoading}>
+          Sync
+          </Button>
+        &nbsp;
+          <Button type="danger" loading={false} onClick={regenLoading}>
+          DB Regen
+          </Button>
+        &nbsp;
+          <Button type="primary" loading={false} onClick={jsonLoading}>
+          Get JSON
+          </Button>
+        </Menu.Item>
+      </Menu>
+      <div className={style}>
+        {
+          isloaded
+            ? <SongItem data={data?.songs} />
+            : <span>차트를 불러오시려면 Sync 버튼을 눌러주세요!</span>
+        }
+      </div>
+    </>
+  );
+};
+
+const style = css`
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  top: 76px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-left: 10px;
+
+  ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px; 
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(90, 90, 90);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export default Charting;

ChartPlayer/FloChartPlayer/src/Components/SongItem.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { List, Avatar } from 'antd';
+
+const SongItem = ({ data }) => {
+  const [initLoading, setInitLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const initLoadCallBack = useCallback(() => {
+    setInitLoading(false);
+    if (data) {
+      setIsLoading(true);
+    }
+  }, [data]);
+
+  useEffect(initLoadCallBack, [data, initLoadCallBack]);
+
+  return (isLoading
+    ? (
+      <List
+        className="song-chart"
+        loading={initLoading}
+        itemLayout="horizontal"
+        dataSource={data}
+        renderItem={(src) => (
+          <List.Item>
+            <List.Item.Meta
+              avatar={<Avatar src={src.img} />}
+              title={src.name}
+              description={`${src.name} - ${src.artist} [${src.album}]`}
+            />
+          </List.Item>
+        )}
+      />
+    ) : null
+  );
+};
+
+SongItem.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+export default SongItem;

ChartPlayer/FloChartPlayer/src/apollo.jsx

@@ -0,0 +1,7 @@
+import ApolloClient from 'apollo-boost';
+
+const client = new ApolloClient({
+  uri: 'http://localhost:4000/'
+});
+
+export default client;

ChartPlayer/FloChartPlayer/src/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import 'antd/dist/antd.css';
+import { ApolloProvider } from '@apollo/react-hooks';
+import client from './apollo';
+
+ReactDOM.render(
+    <ApolloProvider client={client}>
+        <App />
+    </ApolloProvider>,
+    document.getElementById('root')
+);