diff --git a/' b/'
deleted file mode 100644
index dbaf1f92eab69dfde2681e3b71d897daedb03c3b..0000000000000000000000000000000000000000
--- a/'
+++ /dev/null
@@ -1,842 +0,0 @@
-@import "bower_components/bourbon/app/assets/stylesheets/bourbon"
-@import "bower_components/neat/app/assets/stylesheets/neat"
-@import "bower_components/normalize.css/normalize"
-@import "bower_components/datedropper/datedropper"
-@import "bower_components/pace/themes/blue/pace-theme-minimal"
-
-@include font-face('wire','/assets/fonts/Electro')//string_and_wire
-@include font-face('marker','/assets/fonts/twin_marker') //colors_of_autumn')
-
-$standard_font: 'Helvetica Neue',Helvetica,Arial,sans-serif
-$standard_color: #333 //#4285f4
-$standard_light_color: #474747
-$standard_font_color: transparentize(white, 0.3)
-$standard_secondary_color: #2098d1
-
-html
- font-family: $standard_font
- font-size: 90% //82.5%
- li
- list-style: none
- ul
- margin: 0
- padding: 0
- a
- text-decoration: none
-
-.everything
- opacity: 1
- @include transition(opacity 1s ease)
-
-.preload //.pace-running
- height: 100vh
- width: 100vw
- //position: fixed
- z-index: 9999
- //top: 0
- background: url('/assets/images/Nightiies.png') no-repeat center center
- background-size: 50vh
-
- .everything
- opacity: 0
-
-.everything
- @include display(flex)
- overflow: hidden
- //height: 100vh
- //width: 100vw
-
-// -------------------------------------------------
-// New menu
-.menu-button
- width: 40px//60px
- height: 40px//60px
- outline: none
- position: fixed
- margin: 5px
- padding: 8px 9px 9px 9px //14px 15px 15px 15px
- z-index: 999996
- border: 2px solid $standard_secondary_color
- border-radius: 50%
- background: none //rgba(255,255,255,0.5)
-
- i
- font-size: 21px //30px
- color: $standard_secondary_color
-
-
-.menu
- $action-color: #477DCA !default
- $dark-gray: #333 !default
- $sliding-panel-border-color: $dark-gray
- $sliding-panel-background: lighten($sliding-panel-border-color, 5%)
- $sliding-panel-color: #fff
- $sliding-panel-border: 1px solid $sliding-panel-border-color
- $sliding-panel-background-hover: $action-color
- $sliding-panel-color-hover: #fff
- $sliding-panel-background-focus: lighten($sliding-panel-background, 5%)
-
- @include position(fixed)
- @include transform(translateY(-60px)) //X(-160px))
- @include transition(all 0.25s linear)
- background: $standard_color //$sliding-panel-background
- z-index: 999998
- width: 100%
- li a
- @include span-columns(1.5)
- height: 50px
- border-right: 1px solid #2e2e2e //border-bottom $sliding-panel-border
- color: $sliding-panel-color
- display: block
- font-size: 1.1em
- padding: 1em
- text-decoration: none
- overflow: hidden
- //text-overflow: ellipsis
- white-space: nowrap
- @media screen and (max-device-width: 640px), screen and (max-width: 800px)
- @include span-columns(2.6)
- //span
- display: none
-
-
- &:focus, &.active
- background-color: $standard_light_color //$sliding-panel-background-focus
-
- &:hover
- background-color: $sliding-panel-background-hover
- color: $sliding-panel-color-hover
-
-
- &.is-visible
- @include transform(translateY(0))
-
-.fade-menu
- @include position(fixed, 0px 0px 0px 0px)
- @include transition
- background: black
- opacity: 0
- visibility: hidden
- z-index: 999997
-
- &.is-visible
- opacity: 0.4
- visibility: visible
-
-// Track player
-
-@mixin grid-item-columns($columns)
- width: (100% / 12) * $columns
-
-.player
- @include flex-grow(0)
- @include flex-shrink(0)
- background-color: #474747 //$standard_color
- ul
- @include clearfix
- @include row(table)
-
- li
- @include span-columns(1)
- color: $standard_font_color
- white-space: nowrap
- overflow: hidden
- vertical-align: middle
-
- li.track_name
- @include span-columns(6)
- overflow: hidden
- text-overflow: ellipsis
- padding-left: 50px
-
- //div
- &:focus, &:hover
- @include animation(scroll 5s ease infinite)
-
- //@include keyframes(scroll)
- from
- @include transform(translateX(0%))
- to
- @include transform(translateX(-100%))
-
- li.track_player
- @include span-columns(6)
-
- //width: 640px
- line-height: 0px
- height: 35px
- iframe
- display: inline-block
-
-.tracks-colorGrid
-
- width: 100%
- margin-right: calc(100% - 100Vw)
-
- @include display(flex)
- @include flex-direction(row)
- @include flex-wrap(wrap)
- @include align-content(flex-start)
- @include justify-content(stretch)
- @include align-items(stretch)
- //height: 100vh
-
-
- $base-accent-color: #477DCA !default
- $base-background-color: white !default
-
- p
- line-height: 1.5em
- a
- text-decoration: none
-
- $grid-items-background: $base-background-color
- $grid-item-background: desaturate($base-accent-color, 30%)
- $grid-item-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
-
- .grid-item
- @include flex-grow(1)
- @include align-items(center)
- @include justify-content(center)
- @include flex-basis(500px)
-
- @include transition (all 0.2s ease-in-out)
- background: $grid-item-background
- margin: 2px
- cursor: pointer
- padding: 2em
- @extend .hvr-trim
-
- @for $i from 1 through 51 //length($grid-item-colors)
- &:nth-child(#{$i})
- $background-from-list: nth($grid-item-colors, $i % 16 + 1)
- $background-color: transparentize($background-from-list, 0.8)
- background-color: $background-color
-
- &:focus, &:hover, &.active
- background-color: transparentize($background-from-list, 0.4)
- //@extend .hvr-trim
-
- .grid-item p
- margin: auto
- color: #595959 //rgb(180,180,180)
-
- span.track_author
- float: left
-
- span.track_channel
- float: right
-
- span.track_name
- font-size: 1.1em
- color: black
-
- .pagination
- @include flex-grow(1)
- width: 100vw
- margin: 1em
-
-.tracks-table
- width: 100% //100vw
- margin-right: calc(100% - 100vw)
- $base-border-color: gainsboro !default
- $base-background-color: white !default
- $base-line-height: 1.5em !default
- $dark-gray: #333 !default
- $base-font-color: $dark-gray !default
-
- //background: url(records_edited.jpg)
- //background-size: cover
- //background-position: bottom
-
- td
- line-height: $base-line-height
-
- $table-border-color: $base-border-color
- $table-border: 1px solid $table-border-color
- $table-background: $base-background-color
- $table-hover-background: darken($table-background, 3)
- $table-padding: 0.8em 1em
- $table-font-light: rgba(0,0,0,0.6)
-
- border-collapse: collapse//separate //collapse
- border-spacing: 0
-
- tbody
- //background-color: $table-background
- tr:hover > td, tr.active > td
- background-color: $table-hover-background
- //border-color: $standard_secondary_color
- //border-bottom: 1px solid $standard_secondary_color
- color: $standard_secondary_color
-
- //tr:last-child td
- border-bottom: 0px
- td
- border-bottom: 0px
- border-top: 1px solid $table-border-color
- padding: $table-padding
- overflow: hidden
-
- td.track_author
- @include span-columns(2)
- td.track_name
- @include span-columns(6)
- td.track_tags
- @include span-columns(2)
- td.track_channel
- @include span-columns(2)
- td
- a
- color: gray //$table-font-light
-
-
-.menu-placeholder
- display: inline-block
- height: 50px //70px
- width: 50px //70px
-
-.filters-menu
- @include flex-grow(0)
- @include flex-shrink(0)
- //$filter_color: #474747
- background-color: $standard_color//$filter_color
- color: $standard_font_color
- white-space: nowrap
-
- li
- height: 50px //70px
-
- select
- background: $standard_color//$filter_color
- border: none
- outline: none
- cursor: pointer
- color: $standard_font_color
- @include span-columns(2 of 4)
- height: 25px //35px
- //@include appearance(none)
- option
- width: 100px
- color: $standard_font_color
- &:hover, &:focus
- color: $standard_secondary_color
-
- input
- @include span-columns(2 of 4)
- height: 25px //35px
- background: $standard_color //$filter_color
- border: none
- outline: none
- color: $standard_font_color
- &:hover, &:focus
- color: $standard_secondary_color
- @include placeholder
- color: $standard_secondary_color
-
- ul
- display: inline-block
- li
- @include span-columns(4)
- height: 25px //35px
- .first-line
- position: relative
- top: -25px//-35px
- .second-line
- position: relative
- left: -50%
-
- .design
- font-size: 2em
- line-height: 50px //70px
- float: right
- padding: 0 10px
- cursor: pointer
- vertical-align: middle
- &:hover, &.active
- color: #2098d1
-
-
-.pagination
-
- margin: 1em
- //margin-bottom: 2em
-
- $base-border-color: gainsboro !default
- $base-border-radius: 3px !default
- $base-spacing: 1.5em !default
- $base-accent-color: #477DCA !default
- $base-link-color: $base-accent-color !default
- $dark-gray: #333 !default
- $large-screen: em(860) !default
- $base-font-color: $dark-gray !default
-
- $pagination-border-color: $base-border-color
- $pagination-border: 1px solid $pagination-border-color
- $pagination-background: lighten($pagination-border-color, 10)
- $pagination-hover-background: lighten($pagination-background, 5)
- $pagination-color: $base-font-color
-
- text-align: center
-
- ul
- display: inline
- text-align: center
- li
- display: inline
-
- ul li
- display: none
-
- &:nth-child(1),
- &:nth-child(2),
- &:nth-child(3)
- display: inline
-
- @include media($large-screen)
- display: inline
-
- li a
- @include transition (all 0.2s ease-in-out)
- background: $pagination-background
- border-radius: $base-border-radius
- border: $pagination-border
- color: $pagination-color
- outline: none
- padding: ($base-spacing / 4) ($gutter / 2)
-
- &:hover, &:focus
- background: $pagination-hover-background
- color: $base-link-color
-
- a.current
- background: $pagination-hover-background
-
-.tracks
- @include display(flex)
- @include flex-grow(1)
- @include flex-basis(200px)
- @include flex-direction(column)
- @include flex-wrap(nowrap)
- @include justify-content(flex-start)
-
-.presentation
- height: 100vh
- @include display(flex)
- @include flex-grow(1)
- @include flex-basis(200px)
-
-
- background: url('/assets/images/vinyl_prog.jpg')
- background-size: cover
- background-position: bottom
-
- .abstract
- color: white
- margin: auto
- //padding: 3.5em
- text-align: center
- a
- font-family: wire
- text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
- @include filter(drop-shadow(1px 1px 1px rgba(0,0,0,0.9)))
- font-size: 7em
- font-weight: bold
- color: #2098d1 //white
- img
- height: 30vh //10em
- margin-bottom: 1em
- p
- text-align: center
- font-size: 1em
- margin-bottom: 0.5em
-
-
-.channels, .users
- @include display(flex)
- @include flex-direction(row)
- @include flex-wrap(wrap)
- @include flex-grow(1)
- @include flex-basis(200px)
- @include align-content(stretch)
- @include justify-content(stretch)
- @include align-items(stretch)
- height: 100vh
-
- $base-accent-color: #477DCA !default
-
- $channel-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
- //#E0C7A8,#BDCC97,#979EA0,
-
- @include clearfix
-
- .hided
- color: transparent
-
- .channel, .user
- @include display(flex)
- @include flex-grow(1)
- @include align-items(center)
- @include justify-content(center)
- @include transition (all 0.2s ease-in-out)
- //border-radius: 50%
- cursor: pointer
- overflow: hidden
- //@include ellipsis()
- white-space: nowrap
-
- @for $i from 1 to 200//through 51 //length($grid-item-colors)
- &:nth-child(#{$i})
- $background-from-list: nth($channel-colors, $i % 16 + 1)
- $background-color: transparentize($background-from-list, 0.8)
- background-color: $background-color
-
- &:focus, &:hover
- background-color: transparentize($background-from-list, 0.4)
- min-width: 150px
- color: black
-
-// -------------------------------------------------------------
-// Design for pace plugin
-
-//--------------------------------------------------------------
-//I copy paste here the styles that I need from hover.css
-
-/* Trim */
-.hvr-trim
- display: inline-block
- vertical-align: middle
- @include transform(translateZ(0))
- box-shadow: 0 0 1px rgba(0, 0, 0, 0)
- -webkit-backface-visibility: hidden
- backface-visibility: hidden
- -moz-osx-font-smoothing: grayscale
- position: relative
-
- &:before
- content: ''
- position: absolute
- border: white solid 4px
- top: 4px
- left: 4px
- right: 4px
- bottom: 4px
- opacity: 0
- @include transition (opacity 0.3s)
-
- &:hover:before, &:focus:before, &:active:before, &.active:before
- opacity: 1
-
-// ---------------------------------------------------------------------------
-// Cassette design
-.cassette
- background-image: url("/assets/images/cassette/mixtable_bw.jpg")
- background-size: cover
- background-position: center
- height: 100vh
- width: 100vw
-
-iframe.cassette
- width: 0px
- height: 0px
- visibility: hidden
- border: none
-
-/* Main container */
-.cassette-holder
-
- /* Tape elements */
- .tape
- width: 586px
- height: 379px
- margin: auto //30px auto 0
- position: relative
- @include transition(all .4s ease-in-out)
- //INFO
- overflow: hidden
- &:hover
- .cassette-back, .cassette-front
- @include filter(blur(3px) grayscale(90%))
- @include transition(all, 0.5s ease-in-out)
- //opacity: 0.9
- .info-hover
- @include transform(translate(0, -200%))
-
- .info-hover
- padding: 1em 2em
- @include transition(all, 0.5s ease-in-out)
- background: transparentize(#000, 0.7)
- height: inherit
- width: inherit
- overflow: hidden
- color: rgba(255, 255, 255, 0.7)
-
- .vc-loader
- position: absolute
- width: 31px
- height: 31px
- bottom: 50px
- left: 50%
- margin: -15px 0 0 -15px
- background: transparent url(images/cassette/ajax-loader.gif) no-repeat center center
- display: none
-
-.cassette-back
- width: 100%
- height: 100%
- position: relative
- background: transparent url(images/cassette/cs_back.png) no-repeat center center //DESIGN
-
- .wheels
- width: 125px
- height: 125px
- position: absolute
- top: 110px
- background: transparent
- border-radius: 50%
-
- .left-wheel
- left: 109px
- box-shadow: 0 0 0 70px #000
-
- .right-wheel
- right: 113px //109px DESIGN
-
-//@include animation(scroll 5s ease infinite)
-
-@include keyframes(rotateLeft)
- from
- @include transform(rotate(0deg) translateZ(-1px))
- to
- @include transform(rotate(-360deg) translateZ(-1px))
-
-@include keyframes(rotateRight)
- from
- @include transform(rotate(0deg) translateZ(-1px))
- to
- @include transform(rotate(360deg) translateZ(-1px))
-
-.wheels div
- width: 100%
- height: 100%
- background: transparent url(/assets/images/cassette/cs_wheel.png) no-repeat center center
-
-.spin
- @include animation(rotateLeft 2s linear infinite forwards)
-
-.cassette-front
- width: 100%
- height: 100%
- background: url(/assets/images/cassette/cs_front.png) no-repeat center center //transparent url(images/cassette/cassette_reduced_v4.png) no-repeat center
- //top: 0px
- //left: 0px
- position: relative
- top: -379px
-
- span
- color: rgba(0, 0, 0, 0.7)
- position: absolute
- top: 83px
- left: 67px
- font-family: Arial
- font-weight: bold
- font-size: 20px
-
- .tape-name
- position: absolute
- top: 51px //60px DESIGN
- left: 100px //90px DESIGN
- font-family: marker
- font-size: 25px
- width: 370px //450px DESIGN
- margin: 0
- text-indent: 90px //DESIGN
-
- //Second design try DESIGN
- //text-align: left
- //overflow: hidden
- //white-space: nowrap
- //text-overflow: ellipsis
-
-
-/* Controls list */
-ul.vc-controls
- margin: 0 auto//10px auto DESIGN
- height: 70px
- width: 460px //440px
- @include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
- border: 1px solid rgba(0,0,0,0.1)
- border-bottom-color: rgba(255,255,255,0.6)
- padding: 8px
- box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
- //@mixin box-sizing(content-box)
- border-radius: 12px
-
-/* Controls list items */
-ul.vc-controls li
- display: block
- float: left
- width: 80px
- height: 50px
- line-height: 55px
- text-align: left
- padding: 10px
- margin: 0
- cursor: pointer
- background: #ddd url(/assets/images/cassette/metal.jpg) no-repeat center top
- box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
- @include user-select(none)
-
-ul.vc-controls li:first-child
- border-radius: 8px 0 0 8px
-
-ul.vc-controls li:last-child
- border-radius: 0px 8px 8px 0px
-
-ul.vc-controls li.vc-control-play
- width: 120px
-
-/* Control icons */
-ul.vc-controls li span:before
- font-size: 16px
- line-height: 50px
- text-align: center
- float: left
- color: #444
- font-family: 'playericons'
- text-shadow: 1px 1px 1px rgba(255,255,255,0.9)
- font-style: normal
- font-weight: normal
- text-transform: none
- speak: none
- display: inline-block
- text-decoration: inherit
- width: 1em
- margin-right: 0.2em
- text-align: center
-
-li.vc-control-volume-off span:before
- content: 'ðŸâ€â€¡'
-li.vc-control-volume-down span:before
- content: 'ðŸâ€â€°'
-li.vc-control-volume-up span:before
- content: 'ðŸâ€Å '
-
-ul.vc-controls li:hover
- box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -10px 15px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
-
-/* Pressed (active) */
-ul.vc-controls li.vc-control-active
- height: 50px
- margin-top: 2px
- background-image: url(/assets/images/cassette/metal_dark.jpg)
- box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.18), inset 0 0 1px 2px rgba(255,255,255,0.5), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 2px 1px rgba(0,0,0,0.5)
-
-/* Activated */
-ul.vc-controls li.vc-control-pressed,
-ul.vc-controls li.vc-control-active.vc-control-pressed
- height: 50px
- background-image: url(/assets/images/cassette/metal_dark.jpg)
- margin-top: 4px
- box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 5px 1px rgba(255,255,255,0.5), inset 0 -10px 15px rgba(0,0,0,0.2), 0 7px 5px rgba(255,255,255,0.5)
-
-//Background for the volume knob
-//See knobKnob.css for the knob style
-.vc-volume-wrap
- display: none
- width: 118px
- height: 118px
- position: absolute
- bottom: 0px
- left: 50%
- margin-left: -318px
- @include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
- border: 1px solid rgba(0,0,0,0.1)
- border-radius: 50%
- padding: 8px
- box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
- //@mixin box-sizing(content-box)
-
-
-.vc-volume-wrap:after
- content: 'Volume'
- margin-top: 15px
- display: block
-
-/* Text style for controls */
-ul.vc-controls li,
-.vc-volume-wrap:after
- font-family: 'Aldrich'
- font-size: 10px
- font-weight: 300
- text-transform: uppercase
- letter-spacing: 1px
- color: #666
- text-shadow: 0 1px 1px rgba(255,255,255,0.8)
-
-
-// About css
-
-.flex-boxes
- $base-border-radius: 3px !default
- $base-background-color: white !default
- $dark-gray: #333 !default
- $light-gray: #DDD !default
- $base-font-color: $dark-gray !default
- $flex-box-border-color: $light-gray
- $flex-box-border: 1px solid $flex-box-border-color
- $flex-box-background: lighten($light-gray, 10%)
- $flex-box-gutter: 0.4em
- $flex-box-width: 18em
- $flex-box-color: transparentize($base-font-color, 0.3)
- $flex-box-top-colors: tomato, #72BFBF, #92B1E3, #E3D743, #CCC, #F6C05C
-
- @include clearfix
- @include display(flex)
- @include justify-content(center)
- @include align-items(stretch)
- @include flex-wrap(wrap)
- clear: both
- text-align: center
-
- .flex-box
- @include transition (all 0.2s ease-in-out)
- @include flex(2 2 15em)
- @include align-self(stretch)
- background: $flex-box-background
- border-radius: $base-border-radius
- box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%)
- display: block
- margin: $flex-box-gutter
- padding: 2em 2em 3em 2em
- text-decoration: none
-
- @for $i from 1 to 7
- // assign colors from $flex-box-top-colors list
- &:nth-child(#{$i})
- $color-from-list: nth($flex-box-top-colors, $i)
- border-top: 6px solid $color-from-list
-
- &:focus, &:hover
- background-color: transparentize($color-from-list, 0.9)
-
- img
- display: block
- height: 3em
- margin-bottom: 2em
- margin: auto
- opacity: 0.4
-
- .flex-title
- color: $flex-box-color
- font-size: 1.2em
- font-weight: 800
- margin-bottom: 0.5em
-
- p
- color: transparentize($flex-box-color, 0.1)
- line-height: 1.5em
- margin: auto
-
- .flex-box-big
- @include flex(1 1 40em)
diff --git a/README.md b/README.md
index 3497a2be7f806ab12b49d80dccafaa0862a3205f..91eed333ad67a3dc1f19f3dcdbd3ee4ad1affb24 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,20 @@
# Playbot-web
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
+Playbot website lets you listen to thousands of carefully chosen tracks. These tracks cover mainly electro substyles and are aggregated by members of the Nightiies organization.
+The website plays youtube and soundcloud tracks and list them accordindly to some user defined parameters (date of sharing, poster, tag ...).
+All the tracks follow on from each other -randomly or not depending of the display mode- making it perfect as background music player.
+
+Playbotweb deploys an ember.js frond-end.
+
+# Playbot
+
+Playbot is an irc tool developped to share musics or videos : users give away sounds and the software stores and manages them. The playbot-web website uses this database to offer handpicked tracks.
+
+# Playbot API
+
+The link between playbot database and the website is a Rails API.
+
+# Playbot-web installation
## Prerequisites
diff --git a/app/controllers/cassette.js b/app/controllers/cassette.js
index 880cde818ebb8af765124beb70e42e66cae6dde9..d7b9ed87e75fb8879c7fc82c6a81275839a74bf0 100644
--- a/app/controllers/cassette.js
+++ b/app/controllers/cassette.js
@@ -52,9 +52,13 @@ var CassetteController = Ember.Controller.extend({
actions: {
playButton: function() {
+ var audio = new Audio('/assets/samples/click.ogg');
+ audio.play();
this.play();
},
stopButton: function() {
+ var audio = new Audio('/assets/samples/click.ogg');
+ audio.play();
var track = this.model.tracks.content[this.get('n')];
stop_cassette(track);
},
diff --git a/app/index.html b/app/index.html
index 3624921861e70c87a2b93bc7234a9ae0e86d4bdd..d21de890fd3b89305eabf04e541c23f65231306a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,8 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Playbot</title>
- <meta name="description" content="">
+ <meta name="description" content="Listen to handpicked electro tracks.">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" href="/assets/favicon-coffee.ico">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{content-for 'head'}}
diff --git a/app/models/track.js b/app/models/track.js
index c99ebbe4ddd755d4aa9398b15931299a531ed26b..00acda8e750fb033dafe4f910712823ba02559d4 100644
--- a/app/models/track.js
+++ b/app/models/track.js
@@ -6,4 +6,6 @@ export default DS.Model.extend({
author: DS.attr('string'),
channel: DS.attr('string'),
provider: DS.attr('string'),
+
+ tags: DS.hasMany('tag', {async: false})
});
diff --git a/app/styles/app.sass b/app/styles/app.sass
index b8f2ff154ce1be8440abb7f33ba2a3328ac33d9f..94e461f7a3031699293fac62e89d080b90c25771 100644
--- a/app/styles/app.sass
+++ b/app/styles/app.sass
@@ -26,7 +26,7 @@ html
.everything
opacity: 1
- @include transition(opacity 1s ease)
+ @include transition(opacity 0.5s ease)
.preload //.pace-running
height: 100vh
diff --git a/app/templates/about.hbs b/app/templates/about.hbs
index a38cb5bb615b74c9f4498f443656d84d38dd268a..a738e5d16c5dd3a8630560eb78c2fbe49a693a44 100644
--- a/app/templates/about.hbs
+++ b/app/templates/about.hbs
@@ -3,10 +3,10 @@
<a href="javascript:void(0)" class="flex-box flex-box-big">
<i class="icon fa fa-question"/>
<h1 class="flex-title">Help</h1>
- <p>The main part of the website is the Tracks section, where you can filter the sounds by tags (ex: dub, rock), poster, date or origin. From this section, clicking icons in the top-right changes the design. The cassette <i class="fa fa-simplybuilt"/> view plays random tracks matching the filters.</p>
+ <p>The main part of the website is the Tracks section, where you can filter the music by tags (ex: dub, rock), poster, date or origin. From this section, clicking icons in the top-right changes the design. The cassette <i class="fa fa-simplybuilt"/> view plays random tracks matching the filters.</p>
<p>Parse the users list and look for someone with the same taste as yours.
</p>
- <p>The channels are irc chat rooms where we rant on actual state of house music.
+ <p>The channels are irc chat rooms where we rant on present state of house music.
</p>
</a>
<a href="https://git.iiens.net/morignot2011/playbot/tree/master" class="flex-box">
diff --git a/app/templates/cassette.hbs b/app/templates/cassette.hbs
index 08efbf3bb1c10827affad266d6c07d7d8ab58106..cd572a397a38150138b15a429979d9d9e6ecd0a4 100644
--- a/app/templates/cassette.hbs
+++ b/app/templates/cassette.hbs
@@ -14,7 +14,7 @@
<p>{{track.name}}</p>
<p>{{track.channel}}</p>
<p>{{track.author}}</p>
- <p>{{#each tag in track.tag}}
+ <p>{{#each tag in track.tags}}
{{tag.name}}
{{/each}}</p>
</div>
@@ -34,7 +34,7 @@
<i class='fa fa-stop'></i> Stop
</li>
<li class="vc-control-switch" {{action "nextButton"}}>
- Random
+ Next
</li>
</ul>
<div class="vc-volume-wrap">
diff --git a/app/templates/tracks.hbs b/app/templates/tracks.hbs
index 856846e0f1a7038426cc5bc2013d2d0dce4e6801..9ece325eb48f7ffa927b9516fab46bcfef379a9c 100644
--- a/app/templates/tracks.hbs
+++ b/app/templates/tracks.hbs
@@ -16,7 +16,7 @@
</td>
<td class='track_name'>{{track.name}}</td>
<td class='track_tags'>
- {{#each tag in track.tag}}
+ {{#each tag in track.tags}}
{{#link-to 'tracks' (query-params tag=tag.name page=1) bubbles=false}}{{tag.name}}{{/link-to}}
{{/each}}
</td>
@@ -44,7 +44,7 @@
</p>
<p class='track'>
<br/>
- {{#each tag in track.tag}}
+ {{#each tag in track.tags}}
{{tag.name}}
{{/each}}
</p>
diff --git a/public/assets/favicon-coffee.ico b/public/assets/favicon-coffee.ico
new file mode 100644
index 0000000000000000000000000000000000000000..c105d0a0cbda181a8824cfca9ac0f6dedb0f1178
Binary files /dev/null and b/public/assets/favicon-coffee.ico differ
diff --git a/public/assets/samples/click.ogg b/public/assets/samples/click.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..692cafdea4d403a327217d1d43c60c6f1bb663f6
Binary files /dev/null and b/public/assets/samples/click.ogg differ