13 |
14 |
15 | );
16 | };
17 |
18 | export default PlaylistPlayButton;
19 |
--------------------------------------------------------------------------------
/Music/src/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | div,
4 | nav,
5 | p,
6 | a,
7 | ul,
8 | li,
9 | section,
10 | footer,
11 | img,
12 | i,
13 | button {
14 | margin: 0;
15 | padding: 0;
16 | box-sizing: border-box; }
17 |
18 | html,
19 | body {
20 | height: 100vh; }
21 |
22 | body {
23 | cursor: default;
24 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
25 |
26 | a,
27 | a:visited,
28 | a:hover {
29 | text-decoration: none; }
30 |
31 | .container {
32 | display: flex;
33 | flex-direction: row; }
34 |
--------------------------------------------------------------------------------
/Music/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
3 | "linterOptions": {
4 | "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
5 | },
6 | "rules": {
7 | "jsx-boolean-value": false,
8 | "jsx-no-lambda": false,
9 | "member-access": [true, "no-public"],
10 | "ordered-imports": [
11 | true,
12 | {
13 | "import-sources-order": "any",
14 | "named-imports-order": "case-insensitive"
15 | }
16 | ]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/Authentication/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
8 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default Navbar;
27 |
--------------------------------------------------------------------------------
/Music/src/containers/App/styled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | import { sidebarWidth, playerHeight } from '../../css-variables/layout';
4 |
5 | export const Background = styled.div`
6 | background-color: #36096d;
7 | background-image: linear-gradient(315deg, #36096d 0%, #37d5d6 74%);
8 | background-size: cover;
9 | background-repeat: no-repeat;
10 | height: 100vh;
11 | width: 100vw;
12 | position: fixed;
13 | z-index: -1;
14 | `;
15 |
16 | export const Section = styled.div`
17 | margin-left: ${sidebarWidth};
18 | margin-bottom: ${playerHeight};
19 | `;
20 |
21 | export const Wrapper = styled.div`
22 | width: 100%;
23 | `;
24 |
--------------------------------------------------------------------------------
/Authentication/client/src/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_CURRENT_USER, USER_LOADING } from "../actions/types";
2 |
3 | const isEmpty = require("is-empty");
4 |
5 | const initialState = {
6 | isAuthenticated: false,
7 | user: {},
8 | loading: false
9 | };
10 |
11 | export default function(state = initialState, action) {
12 | switch (action.type) {
13 | case SET_CURRENT_USER:
14 | return {
15 | ...state,
16 | isAuthenticated: !isEmpty(action.payload),
17 | user: action.payload
18 | };
19 | case USER_LOADING:
20 | return {
21 | ...state,
22 | loading: true
23 | };
24 | default:
25 | return state;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/Authentication/client/src/components/private-route/PrivateRoute.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Route, Redirect } from "react-router-dom";
3 | import { connect } from "react-redux";
4 | import PropTypes from "prop-types";
5 |
6 | const PrivateRoute = ({ component: Component, auth, ...rest }) => (
7 | 18 | ΜΟΥΣΙΚΗ 19 |
20 |Back
31 | 32 |
35 |
40 |
46 |
47 |
25 |
54 | );
55 | }
56 | }
57 |
58 | Dashboard.propTypes = {
59 | logoutUser: PropTypes.func.isRequired,
60 | auth: PropTypes.object.isRequired,
61 | };
62 |
63 | const mapStateToProps = (state) => ({
64 | auth: state.auth,
65 | });
66 |
67 | export default connect(mapStateToProps, { logoutUser })(Dashboard);
68 |
--------------------------------------------------------------------------------
/Music/src/components/PlayerControls/PlayerControls.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import {
4 | faPauseCircle,
5 | faPlayCircle,
6 | } from '@fortawesome/free-regular-svg-icons';
7 | import {
8 | faStepBackward,
9 | faStepForward,
10 | } from '@fortawesome/free-solid-svg-icons';
11 |
12 | import { Container, Controls, PlayButton, SkipButton } from './styled';
13 |
14 | const playButton =
29 |
53 |
30 |
52 |
31 |
49 | 50 |
51 | 32 | Hey there, {user.name.split(" ")[0]} 33 |
34 | You have logged in to{" "} 35 | 41 | ΜΟΥΣΙΚΗ 42 | 43 |
44 | 45 | 46 | 47 | 48 |49 | 50 |
12 | 
13 |
17 | 
18 |
22 | 
23 |
27 | 
28 |
32 | 
33 |
37 | 
38 |
42 | 
43 |
47 | 
48 |
{formatDuration(track.duration_ms)}
72 |
63 | {this.props.temp.name}
64 |
65 | 66 |
63 | {this.props.temp.name}
64 |
65 | 66 |
66 |
140 | );
141 | }
142 | }
143 |
144 | Login.propTypes = {
145 | loginUser: PropTypes.func.isRequired,
146 | auth: PropTypes.object.isRequired,
147 | errors: PropTypes.object.isRequired,
148 | };
149 |
150 | const mapStateToProps = (state) => ({
151 | auth: state.auth,
152 | errors: state.errors,
153 | });
154 |
155 | export default connect(mapStateToProps, { loginUser })(Login);
156 |
--------------------------------------------------------------------------------
/Music/src/components/PlaylistView/PlaylistView.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import * as actions from '../../actions';
5 |
6 | import CoverArt from '../CoverArt';
7 | import PlaylistPlayButton from '../PlaylistPlayButton';
8 | import TrackContainer from '../../containers/TrackContainer';
9 | import Loading from '../Loading';
10 | import {
11 | DescriptionWrapper,
12 | InfoBox,
13 | Text,
14 | TracksWrapper,
15 | Wrapper,
16 | } from './styled';
17 |
18 | import { rootUrl } from '../../variables';
19 |
20 | class PlaylistView extends Component {
21 | componentDidMount() {
22 | this.props.fetchPlaylistView(this.props.currentPlaylistHref);
23 | }
24 |
25 | componentWillUnmount() {
26 | this.props.clearPlaylistView();
27 | }
28 |
29 | handleButton = () => {
30 | const {
31 | isPaused,
32 | isPlaying,
33 | isActivePlaylist,
34 | setPause,
35 | unpause,
36 | startPlay,
37 | } = this.props;
38 | if (isActivePlaylist && isPlaying && !isPaused) {
39 | return setPause();
40 | }
41 | if (isActivePlaylist && isPlaying && isPaused) {
42 | return unpause();
43 | }
44 | if (!isActivePlaylist) {
45 | return startPlay();
46 | }
47 | };
48 |
49 | render() {
50 | const {
51 | activePlaylistHref,
52 | activeTrackId,
53 | currentPlaylistHref,
54 | isPaused,
55 | isPlaying,
56 | playlist,
57 | setPause,
58 | startPlay,
59 | tracklist,
60 | isActivePlaylist,
61 | } = this.props;
62 |
63 | if (!tracklist) {
64 | return
67 |
139 |
68 |
138 |
69 |
137 |
73 |
77 |
127 | 74 | SIGN IN 75 |
76 |
131 |
136 | 132 | No account?{" "} 133 | Sign Up! 134 |
135 |
66 |
164 | );
165 | }
166 | }
167 |
168 | Register.propTypes = {
169 | registerUser: PropTypes.func.isRequired,
170 | auth: PropTypes.object.isRequired,
171 | errors: PropTypes.object.isRequired,
172 | };
173 |
174 | const mapStateToProps = (state) => ({
175 | auth: state.auth,
176 | errors: state.errors,
177 | });
178 |
179 | export default connect(mapStateToProps, { registerUser })(withRouter(Register));
180 |
--------------------------------------------------------------------------------
/Authentication/client/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/Music/src/components/Search/Search.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | //import {uid} from 'react-uid';
3 | import {
4 | DescriptionWrapper,
5 | Wrapper,
6 | ListWrapper,
7 | NavItem,
8 | Navbar,
9 | Container
10 | } from './styled';
11 | import axios from 'axios';
12 | import CoverArt from './CoverArt.js';
13 | import './Search.css';
14 | import keys from '../../keys.js';
15 |
16 | export default class Search extends React.Component {
17 |
18 | state = {
19 | clienID: keys.clientID,
20 | clientSecret: keys.clientSecret,
21 | access_token: "",
22 | searchField: "",
23 | albums: []
24 | }
25 |
26 | componentDidMount() {
27 | this.getToken();
28 | }
29 |
30 | getToken = async () => {
31 | const result = await fetch('https://accounts.spotify.com/api/token',
32 | {
33 | method: 'POST',
34 | headers: {
35 | 'Content-Type': 'application/x-www-form-urlencoded',
36 | 'Authorization' : `Basic ` + btoa(this.state.clienID + ':' + this.state.clientSecret)
37 |
38 | },
39 | body: 'grant_type=client_credentials'
40 | });
41 | const data = await result.json();
42 | this.state.access_token = data.access_token;
43 | this.state.data = data;
44 | }
45 |
46 |
47 |
48 | onChangeHandler = (e) => {
49 | const newSearchField = e.target.value.split(' ').join('%20OR%20');
50 | this.setState({
51 | searchField: newSearchField
52 | })
53 | }
54 |
55 | searchHandler = () => {
56 | axios.get(`https://api.spotify.com/v1/search?q=${this.state.searchField}&type=album`,
57 | {
58 | headers: {
59 | Authorization: `Bearer ${this.state.access_token}`
60 | }})
61 | .then(data => {
62 | var responseData = data.data.albums.items;
63 | var newAlbum = [];
64 | responseData.forEach(element => {
65 | let temp = {};
66 | temp["id"] = element["id"];
67 | temp["total_tracks"] = element["total_tracks"];
68 | temp["name"] = element["name"];
69 | temp["image"] = element["images"][1]["url"];
70 | temp["artist_name"] = element["artists"][0]["name"];
71 | newAlbum.push(temp);
72 | });
73 | this.setState({
74 | albums: newAlbum
75 | })
76 | })
77 | .catch(err => {
78 | console.log(err);
79 | })
80 |
81 | }
82 | onKeyUpHandler() {
83 | if (this.state.searchField.length === 0)
84 | return;
85 | this.searchHandler();
86 | }
87 |
88 | gridTemplateColumns = w => {
89 | switch (true) {
90 | case w <= 547:
91 | return 'repeat(2, minmax(16px, 218px))';
92 | case w >= 548 && w <= 771:
93 | return 'repeat(3, minmax(146px, 230px))';
94 | case w >= 772 && w <= 979:
95 | return 'repeat(4, minmax(166px, 217px))';
96 | default:
97 | return 'repeat(6, minmax(145px, 230px))';
98 | }
99 | }
100 |
101 | render() {
102 | return (
103 |
67 |
163 |
68 |
162 |
69 |
161 |
73 |
77 |
151 | 74 | SIGN UP 75 |
76 |
155 |
160 | 156 | Already have an account?{" "} 157 | Sign In! 158 |
159 |117 |
118 | input && input.focus()}
120 | placeholder = "Search for an album"
121 | className = "search-bar"
122 | type="text"
123 | onKeyUp = {() => this.onKeyUpHandler()}
124 | onChange = {(e) => this.onChangeHandler(e)}/>
125 |
126 | 127 |
139 |
140 | input && input.focus()}
142 | placeholder = "Pop, Country, Metal, etc."
143 | className = "search-bar"
144 | type="text"
145 | onChange = {(e) => this.onChangeHandler(e)}
146 | onKeyPress = {(e) => this.keyPressHandler(e)}
147 | />
148 |
149 | 150 |