initial progress

.github/workflows/build.yaml

@@ -3,7 +3,13 @@
 
 name: Build Deej-A.I.
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   build:

.gitignore

@@ -1,5 +1,69 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/*
+web-build/
+
 # dependencies
 /node_modules
 /.pnp

.vscode/launch.json

@@ -4,6 +4,13 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch Chrome",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:19000/debugger-ui/",
+      "webRoot": "${workspaceFolder}"
+    },
     {
       "name": "Attach to Chrome",
       "port": 9222,
@@ -33,6 +40,7 @@
         "--reload",
         "--reload-dir",
         "backend",
+        "--host=0.0.0.0",
         "--port=8001"
       ],
       "jinja": true

App.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Playlist from './src/components/Playlist'
+import { DarkTheme, Provider as PaperProvider } from 'react-native-paper';
+
+global.Buffer = global.Buffer || require('buffer').Buffer;
+
+process.env.REACT_APP_API_URL = 'https://deej-ai.online/api/v1';
+
+const theme = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors
+  },
+};
+
+export default function App() {
+  return (
+    <PaperProvider theme={theme}>
+      <Playlist track_ids={[
+        "1O0xeZrBDbq7HPREdmYUYK", "6Y0ed41KYLRnJJyYGGaDgY",
+        "5yrsBzgHkfu2idkl2ILQis", "6yXcmVKGjFofPWvW9ustQX",
+        "1DKyFVzIh1oa1fFnEmTkIl", "6b8hjwuGl1H9o5ZbrHJcpJ",
+        "5qRJD1yaLJ5s0J3JpbgnwA", "6kotXaSQaGYxE62hVpdHWu",
+        "4lrQv8z3qq1Rl8bsc0Qy0y", "2nmaEzFZrSm2aMLtfJDzyG",
+        "3PPDUkGHUJx2bxct6A3PBy", "1b7LMtXCXGc2EwOIplI35z"
+      ]} />
+    </PaperProvider>
+  );
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

backend/main.py

@@ -75,6 +75,7 @@ def receive_before_insert(mapper, connection, target):  # pylint: disable=unused
     'http://localhost:3000',
     'http://127.0.0.1:8080',
     'http://localhost',
+    'http://localhost:19006',
 ]
 
 app.add_middleware(

package.json

@@ -8,11 +8,20 @@
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "5.0.2",
     "bootswatch": "^5.1.0",
+    "buffer": "^6.0.3",
+    "expo": "~42.0.0",
     "history": "^5.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.0-beta.4",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-elements": "^3.4.2",
+    "react-native-paper": "^4.9.2",
+    "react-native-svg": "^12.1.1",
+    "react-native-vector-icons": "^8.1.0",
+    "react-native-web": "~0.13.12",
+    "react-native-webview": "^11.13.0",
     "react-router": "^6.0.0-beta.1",
     "react-router-dom": "^6.0.0-beta.1",
     "react-scripts": "4.0.3",
@@ -36,7 +45,12 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "start-native": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject-native": "expo eject"
   },
   "eslintConfig": {
     "extends": [
@@ -58,6 +72,7 @@
   },
   "proxy": "http://localhost:8000",
   "devDependencies": {
+    "@babel/core": "^7.9.0",
     "react-test-renderer": "^17.0.2"
   }
 }

src/App.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
-import { getHashParams, usePersistedState } from './lib';
+import { getHashParams, usePersistedState } from './components/Lib';
 import Banner from './components/Banner';
 import Spotify from './components/Spotify';
 import ErrorBoundary from './components/ErrorBoundary';

src/components/About.js

@@ -1,53 +1,45 @@
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import { FaPlus, FaForward, FaCloudUploadAlt, FaSpotify, FaCog } from 'react-icons/fa';
-import { VerticalSpacer } from '../lib';
+import React from 'react';
+import { View, Row, Col, Text, Link, FaPlus, FaForward, FaCloudUploadAlt, FaSpotify, FaCog } from './Platform';
+import { VerticalSpacer } from './Lib';
 
 export default function About() {
   return (
-    <>
-      <h5 data-testid='blurb'>
+    <View>
+      <Text h5 data-testid='blurb'>
         <b>Deej-A.I.</b> uses artificial intelligence to automatically generate playlists of tracks that go well
         together. It was trained using hundreds of thousands of Spotify tracks and user playlists.
-      </h5>
+      </Text>
       <VerticalSpacer px={15} />
-      <h5>
+      <Text h5>
         Create a playlist by adding <FaPlus /> any tracks that you would like to include.
         Pressing <FaForward /> will then generate a playlist that smoothly "<i>joins the dots</i>" between
         them. This is a great way to create playlists that start off with chill out, for example, and build
         up to dance music as the party picks up!
-      </h5>
+      </Text>
       <VerticalSpacer px={15} />
-      <h5>
+      <Text h5>
         Don't forget to rate the playlists! This will help other people find the best ones.
-      </h5>
+      </Text>
       <VerticalSpacer px={15} />
-      <h5>
+      <Text h5>
         If you have a Spotify <FaSpotify /> account and you log in, you will see the current track if one
         is playing when creating a playlist. By clicking on this, Deej-A.I. will search for similar sounding
         tracks in its database. You will also be able to upload <FaCloudUploadAlt /> playlists to your account.
-      </h5>
+      </Text>
       <VerticalSpacer px={15} />
-      <h5>
+      <Text h5>
         In the settings screen <FaCog />, you can control the number of tracks that are added to the
         playlists as well as a couple of aspects of how they are generated. If <i>creativity</i> is set to 100%,
         then tracks are chosen with similar sound, energy, mood and instrumentation. It does this by
         simply "listening" and not using any information about the tracks themselves. If creativity
         is set to 0%, then tracks are selected based on similar artists ("Spotify users also included in
         their playlists..."). You can use the <i>noise</i> setting to add a bit of randomness.
-      </h5>
+      </Text>
       <VerticalSpacer px={15} />
-      <h5>
-        This was my Masters in Deep Learning project at <a
-          href='https://www.mbitschool.com/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >MBIT School</a>. If you want to learn about it works, check out this <a
-          href='https://towardsdatascience.com/create-automatic-playlists-by-using-deep-learning-to-listen-to-the-music-b72836c24ce2'
-          target='_blank'
-          rel='noopener noreferrer'
-        >article</a>.
-      </h5>
+      <Text h5>
+        This was my Masters in Deep Learning project at <Link url='https://www.mbitschool.com/' text='MBIT School'/>
+        . If you want to learn about it works, check out this <Link url='https://towardsdatascience.com/create-automatic-playlists-by-using-deep-learning-to-listen-to-the-music-b72836c24ce2' text='article'/>.
+      </Text>
       <VerticalSpacer px={15} />
       <Row className='align-items-center'>
         <Col>
@@ -78,6 +70,6 @@ export default function About() {
           </div>
         </Col>
       </Row>
-    </>
+    </View>
   );
 }

src/components/AddTrack.js

@@ -3,7 +3,7 @@ import { FaPlus } from 'react-icons/fa';
 import Card from 'react-bootstrap/Card';
 import Spinner from 'react-bootstrap/Spinner';
 import TrackSelector from './TrackSelector';
-import { HorizontalSpacer } from '../lib';
+import { HorizontalSpacer } from './Lib';
 
 export default function AddTrack({ numTracks = 0, spotify = null, onAdd = f => f }) {
   const [currentId, setCurrentId] = useState(null);

src/components/Banner.js

@@ -4,7 +4,7 @@ import Navbar from 'react-bootstrap/Navbar';
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import './Banner.css'
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 
 export default function Banner({ loggedIn = false, onSelect = f => f }) {
   const [expanded, setExpanded] = useState(false);

src/components/CreatePlaylist.js

@@ -6,7 +6,7 @@ import AddTrack from './AddTrack';
 import RemovablePlaylist from './RemovablePlaylist';
 import generatePlaylist from './GeneratePlaylist';
 import SavePlaylist from './SavePlaylist';
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 
 export default function CreatePlaylist({
   waypoints = { track_ids: [] },

src/components/Footer.js

@@ -2,7 +2,7 @@ import { FaLinkedin, FaFacebook, FaTwitter, FaReddit, FaMedium, FaGithub } from
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import './Footer.css'
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 
 export default function Footer() {
   return (

src/components/LatestPlaylists.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useReducer } from 'react';
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 import ShowPlaylists from './ShowPlaylists';
 
 export async function getLatestPlaylists(top_n) {

src/lib.js → src/components/Lib.js

@@ -1,3 +1,4 @@
+import { View } from './Platform';
 import { useState, useEffect } from 'react';
 
 export const getHashParams = () => {
@@ -32,12 +33,12 @@ export const usePersistedState = (key, defaultValue) => {
 
 export function VerticalSpacer({ px = 10 }) {
   return (
-    <div style={{ marginTop: `${px}px` }} />
+    <View style={{ marginTop: `${px}px` }} />
   );
 }
 
 export function HorizontalSpacer({ px = 10 }) {
   return (
-    <div style={{ width: `${px}px` }} />
+    <View style={{ width: `${px}px` }} />
   );
 }

src/components/MostUploadedPlaylists.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useReducer } from 'react';
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 import ShowPlaylists from './ShowPlaylists';
 
 export async function getMostUploadedPlaylists(top_n) {

src/components/NotFound.js

@@ -1,4 +1,4 @@
-import { VerticalSpacer } from '../lib';
+import { VerticalSpacer } from './Lib';
 import Track from './Track';
 
 export default function NotFound() {