diff --git a/app.js b/app.js index 78938c9..a5f3e31 100644 --- a/app.js +++ b/app.js @@ -116,7 +116,7 @@ app.post("/:kind/add",(req,res)=>{ } }) -const port = 3001 +const port = 3002 app.listen(port, () => console.log(`Listening at http://localhost:${port}`)) /* diff --git a/itunes/public/index.html b/itunes/public/index.html index aa069f2..059c719 100644 --- a/itunes/public/index.html +++ b/itunes/public/index.html @@ -15,6 +15,7 @@ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> + - React App + iTunes App diff --git a/itunes/src/App.css b/itunes/src/App.css index 74b5e05..32aaffb 100644 --- a/itunes/src/App.css +++ b/itunes/src/App.css @@ -28,6 +28,21 @@ color: #61dafb; } +.gradient { + background-image: radial-gradient(#DDDDFF,#F0F0F0); +} +.gradient:hover { + background-image: radial-gradient(#DDDDFF,#FFFFDD); +} +.shadow { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} +.bottomright { + position:"absolute"; + right:80vw; + bottom:80vh; +} + @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/itunes/src/App.js b/itunes/src/App.js index 97f9c58..de69f72 100644 --- a/itunes/src/App.js +++ b/itunes/src/App.js @@ -1,52 +1,92 @@ import React, { useState, useEffect } from 'react'; import './App.css'; +const playerWidth=320; -const RadioButton = (props) => { +const PreviewWindow = (props) => { + return (props.src!==null)?
+ " + const togglePreview = (setPreview,sourceUrl) => { + //console.log(setPreview+","+sourceUrl) + setPreview(sourceUrl); } return (
- {props.data.map((media, counter) =>
{media.artistName}{media.trackName} - {media.trackId} {media.collectionName} {media.collectionId} - {media.artistId} {media.artistName} -
)} -
) + {props.data.map((media, counter) => + +
+
+
+

{media.trackName}

+ {media.artistName} : {media.collectionName} +
+
+ {media.artistName}/ +
+
+
+
+ +
+
+
+ )} +
) } const App = () => { const [mediaType, setMediaType] = useState("song") const [currentData, setCurrentData] = useState([]) + const [currentPreview, setPreview] = useState(null) + const [searchQuery, setSearchQuery] = useState("") - useEffect(() => {fetch(`http://localhost:3001/${mediaType}`) + useEffect(() => {fetch(`http://localhost:3002/${mediaType}`) .then(response => response.json()) - .then(data => {console.log(data); setCurrentData(data)})}, [mediaType]) + .then(data => {/*console.log(data);*/ setCurrentData(data)})}, [mediaType]) + + function setSearch(e){ + setSearchQuery(e.target.value) + //console.log(e.target.value); + } return ( - Current media type: {mediaType} - - - - - +
+
+
+ Search Title/Artist/Album: {setSearch(e)}}/> +
+
+
+
+ + + +
+
+ 0)?currentData.filter((song)=>{ + return (song.trackName.toLowerCase().includes(searchQuery.toLowerCase())||song.collectionName.toLowerCase().includes(searchQuery.toLowerCase())||song.artistName.toLowerCase().includes(searchQuery.toLowerCase())) + }):currentData} setPreview={setPreview}/> + +
) } diff --git a/itunes/src/index.js b/itunes/src/index.js index f5185c1..d230214 100644 --- a/itunes/src/index.js +++ b/itunes/src/index.js @@ -4,6 +4,15 @@ import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +document.addEventListener("scroll",()=>{ + var obj = document.getElementById("previewWindow"); + if (obj) { + obj.style.position="absolute"; + obj.style.right=window.scrollX+"px"; + obj.style.bottom=-window.scrollY+"px"; + } +}) + ReactDOM.render(