diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d65b5cd..fc74bd7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,13 +3,15 @@ import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { ArtistsComponent } from './components/artists/artists.component'; import { AlbumsComponent } from './components/albums/albums.component'; +import { SongComponent } from './components/song/song.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'artists/:id', component: ArtistsComponent }, { path: 'artists', component: ArtistsComponent }, { path: 'albums/:id', component: AlbumsComponent }, - { path: 'albums', component: AlbumsComponent } + { path: 'albums', component: AlbumsComponent }, + { path: 'songs', component: SongComponent } ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index f0355cc..9641ab7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,46 @@ - +
+ +
+ + - - - + + +
+
+ + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..38a1a62 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,69 @@ +// Main +body { + overflow-x: hidden; +} +app-controls { + width: 100%; + height: 64px; + position: fixed; + bottom: 0; + left: 0; +} +#wrapper { + height: calc(100vh - 64px); +} + +// Sidebar +#sidebar-wrapper { + min-height: inherit; + margin-left: -15rem; + -webkit-transition: margin .25s ease-out; + -moz-transition: margin .25s ease-out; + -o-transition: margin .25s ease-out; + transition: margin .25s ease-out; +} + +#sidebar-wrapper .sidebar-heading { + padding: 0.875rem 1.25rem; + font-size: 1.2rem; +} + +.sidebar-heading > img { + width: 64px; +} + +#sidebar-wrapper .list-group { + width: 15rem; +} + +#wrapper.toggled #sidebar-wrapper { + margin-left: 0; +} + +// Page content +#page-content { + min-width: 100%; +} + +#navbar-search { + display: none; +} + +@media (min-width: 768px) { + #sidebar-wrapper { + margin-left: 0; + } + + #navbar-search { + display: block; + } + + #page-content { + min-width: 0; + width: 100%; + } + + #wrapper.toggled #sidebar-wrapper { + margin-left: -15rem; + } +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b8602dd..7775fd1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,33 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { faGlobeEurope, faMusic, faCompactDisc, faUsers, faCog, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'Cassettea'; -} + navToggled; + + // FontAwesome + faGlobeEurope = faGlobeEurope; + faMusic = faMusic; + faCompactDisc = faCompactDisc; + faUsers = faUsers; + faCog = faCog; + faChevronLeft = faChevronLeft; + faChevronRight = faChevronRight; + + + constructor() { + this.navToggled = false; + } + + ngOnInit() { + } + + toggleNav() { + this.navToggled = (this.navToggled) ? false : true; + } +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2b44c2b..d943bdc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,7 +10,6 @@ import { HomeComponent } from './components/home/home.component'; import { SongComponent } from './components/song/song.component'; import { ArtistsComponent } from './components/artists/artists.component'; import { AlbumsComponent } from './components/albums/albums.component'; -import { NavComponent } from './components/nav/nav.component'; import { ControlsComponent } from './components/controls/controls.component'; @NgModule({ @@ -20,7 +19,6 @@ import { ControlsComponent } from './components/controls/controls.component'; SongComponent, ArtistsComponent, AlbumsComponent, - NavComponent, ControlsComponent ], imports: [ diff --git a/src/app/components/controls/controls.component.html b/src/app/components/controls/controls.component.html index 75d3615..230d844 100644 --- a/src/app/components/controls/controls.component.html +++ b/src/app/components/controls/controls.component.html @@ -1,19 +1,20 @@ -
+
-
+ {{ song.name }} -
+ -
+ -
+ -
+ + + -
- -
- -
+ + + +
diff --git a/src/app/components/controls/controls.component.scss b/src/app/components/controls/controls.component.scss index e69de29..6430b54 100644 --- a/src/app/components/controls/controls.component.scss +++ b/src/app/components/controls/controls.component.scss @@ -0,0 +1,14 @@ +.controls-wrapper { + width: 100%; + padding: 18px; + line-height: 1.5em; +} +.form-control-range { + display: inline; +} +// #song-range { +// width: 50%; +// } +// #volume-range { +// width: 20%; +// } \ No newline at end of file diff --git a/src/app/components/controls/controls.component.ts b/src/app/components/controls/controls.component.ts index c2d2735..de01f9c 100644 --- a/src/app/components/controls/controls.component.ts +++ b/src/app/components/controls/controls.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons'; +import { faPlay, faPause, faVolumeMute, faVolumeDown, faVolumeUp } from '@fortawesome/free-solid-svg-icons'; import { AudioService } from 'src/app/services/audio.service'; import { Song } from '../../classes/entities'; import { ApiService } from 'src/app/services/api.service'; @@ -14,6 +14,9 @@ export class ControlsComponent implements OnInit { // ? Fontawesome imports faPlay = faPlay; faPause = faPause; + faVolumeMute = faVolumeMute; + faVolumeDown = faVolumeDown; + faVolumeUp = faVolumeUp; currentSong: Promise; diff --git a/src/app/components/nav/nav.component.html b/src/app/components/nav/nav.component.html deleted file mode 100644 index 303804b..0000000 --- a/src/app/components/nav/nav.component.html +++ /dev/null @@ -1,19 +0,0 @@ -
- - -
- \ No newline at end of file diff --git a/src/app/components/nav/nav.component.scss b/src/app/components/nav/nav.component.scss deleted file mode 100644 index e1e14b6..0000000 --- a/src/app/components/nav/nav.component.scss +++ /dev/null @@ -1,36 +0,0 @@ -body { - overflow-x: hidden; - } - - #sidebar-wrapper { - min-height: 100vh; - margin-left: -15rem; - -webkit-transition: margin .25s ease-out; - -moz-transition: margin .25s ease-out; - -o-transition: margin .25s ease-out; - transition: margin .25s ease-out; - } - - #sidebar-wrapper .sidebar-heading { - padding: 0.875rem 1.25rem; - font-size: 1.2rem; - } - - #sidebar-wrapper .list-group { - width: 15rem; - } - - #wrapper.toggled #sidebar-wrapper { - margin-left: 0; - } - - @media (min-width: 768px) { - #sidebar-wrapper { - margin-left: 0; - } - - #wrapper.toggled #sidebar-wrapper { - margin-left: -15rem; - } - } - \ No newline at end of file diff --git a/src/app/components/nav/nav.component.spec.ts b/src/app/components/nav/nav.component.spec.ts deleted file mode 100644 index c386910..0000000 --- a/src/app/components/nav/nav.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NavComponent } from './nav.component'; - -describe('NavComponent', () => { - let component: NavComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ NavComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NavComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/components/nav/nav.component.ts b/src/app/components/nav/nav.component.ts deleted file mode 100644 index ff9baa6..0000000 --- a/src/app/components/nav/nav.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-nav', - templateUrl: './nav.component.html', - styleUrls: ['./nav.component.scss'] -}) -export class NavComponent implements OnInit { -navToggled; - - constructor() { - this.navToggled = false; - } - - ngOnInit() { - } - - toggleNav() { - this.navToggled = (this.navToggled) ? false : true; - } - -} diff --git a/src/app/services/entity.service.ts b/src/app/services/entity.service.ts index 1983fbb..8e20c83 100644 --- a/src/app/services/entity.service.ts +++ b/src/app/services/entity.service.ts @@ -21,8 +21,7 @@ export class EntityService { const result = []; // For every entity in the api data. - data.data.result.forEach(element => { - + data.data.result.forEach((element: { type: any; }) => { // If the type is... switch (element.type) { // ... a song, add a song entity to the result array.