From 62dcc76635e40c817e9c58040ba087c3916ecf53 Mon Sep 17 00:00:00 2001
From: Sybil <sybil.deboin@gmail.com>
Date: Mon, 25 May 2015 23:17:09 +0200
Subject: [PATCH] Tags fixed, Favicon, etc.
---
' | 842 -------------------------------
README.md | 17 +-
app/controllers/cassette.js | 4 +
app/index.html | 3 +-
app/models/track.js | 2 +
app/styles/app.sass | 2 +-
app/templates/about.hbs | 4 +-
app/templates/cassette.hbs | 4 +-
app/templates/tracks.hbs | 4 +-
public/assets/favicon-coffee.ico | Bin 0 -> 1150 bytes
public/assets/samples/click.ogg | Bin 0 -> 5825 bytes
11 files changed, 30 insertions(+), 852 deletions(-)
delete mode 100644 '
create mode 100644 public/assets/favicon-coffee.ico
create mode 100644 public/assets/samples/click.ogg
diff --git a/' b/'
deleted file mode 100644
index dbaf1f9..0000000
--- 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 3497a2b..91eed33 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 880cde8..d7b9ed8 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 3624921..d21de89 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 c99ebbe..00acda8 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 b8f2ff1..94e461f 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 a38cb5b..a738e5d 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 08efbf3..cd572a3 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 856846e..9ece325 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
GIT binary patch
literal 1150
zcmZQzU<5(|0R|wcz>vYhz#zuJz@P!dKp~(AL>x#lFaYILfs!CRn1GU!QV<Zo1mgch
zVvt&Ym>)>g3$x<|Oh2_~pgXdG_zMuj>_DbL;#v6Y!lM^v&KCmuVe0VFe}VR#2Vy&P
zvw&jw^ugrXfa-1oF@{@+(GRi{s7@KAmK^&j)ep26pZh-$;Rl@Ihwh)D!2b`71rTmv
YgkTW+0Y4N2#U6k#Clo{ZFg+j|01~0Ep8x;=
literal 0
HcmV?d00001
diff --git a/public/assets/samples/click.ogg b/public/assets/samples/click.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..692cafdea4d403a327217d1d43c60c6f1bb663f6
GIT binary patch
literal 5825
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
literal 0
HcmV?d00001
--
GitLab