(petosorus-random_button) Améliore les espacements des boutons

* 'random_button' of https://github.com/petosorus/kaamelott-soundboard:
  Random button styling

.gitignore

@@ -1,3 +1,5 @@
 bower_components
 dist
 node_modules
+.gitconfig
+*.swp

Audacity/Chains/NormalizeSounds.txt

@@ -1,3 +1,3 @@
-TrimSilence...: threshold=-48.000000 min-start-silence=0.000000 min-end-silence=0.000000
+TrimSilence: threshold=-48.000000 min-start-silence=0.000000 min-end-silence=0.000000
 Normalize: ApplyGain=yes RemoveDcOffset=yes Level=-1.000000 StereoIndependent=no
 ExportMp3:

Dockerfile

@@ -0,0 +1,2 @@
+FROM httpd:2.4
+COPY . /usr/local/apache2/htdocs/

README.md

@@ -8,7 +8,15 @@ Alors, c'est classe ou c'est pas classe ? Ou c'est classe ?
 
 ## Lancer le projet ##
 
-Pour faire fonctionner le projet sur votre machine, vous devrez tout d'abord, depuis la racine, exécuter la commande `bower install` puis accéder au fichier `index.html` via le serveur Web de votre choix (Apache pour moi, quand je ne suis pas sioux et que je ne m'y prends pas comme un commanche).
+Pour faire fonctionner le projet sur votre machine, vous devrez tout d'abord, depuis la racine, exécuter la commande `bower install` puis accéder au fichier `index.html` via le serveur Web de votre choix (Apache pour moi, quand je ne suis pas sioux et que je ne m'y prends pas comme un commanche). Pour cela vous pouvez utiliser [Docker](https://www.docker.com/) avec les 2 commandes suivantes :
+```bash
+docker build -t 2ec0b4/kaamelott-soundboard .
+docker run -it --rm --name kaamelott-soundboard -p 80:80 -t 2ec0b4/kaamelott-soundboard
+```
++ Pour les utilisateurs Windows 10 : Rendez-vous sur la page [http://localhost]()
++ Pour les utilisateurs Windows 7 : Rendez-vous sur la page [http://192.168.99.100]()
+
+Whoooohoooo woa c'est mortel !
 
 ## Contribuer ##
 
@@ -20,4 +28,10 @@ Pour faire fonctionner le projet sur votre machine, vous devrez tout d'abord, de
 6. Poussez vos modifications (`git push origin head`)
 7. Créez une [fusiodemande](https://github.com/2ec0b4/kaamelott-soundboard/pulls)
 
+## Liens ##
+
+* [Reddit](https://www.reddit.com/r/france/comments/5orvyf/kaamelott_soundboard_3/)
+* [Application iOS](https://github.com/tnducrocq/kaamelott-sound-board-ios)
+* [Visualisation graphique des répliques du _soundboard_](https://github.com/aluriak/kaamelott-soundboard-viz)
+
 Merci, de rien, au revoir m'sieur dame

css/style.css

@@ -548,19 +548,46 @@ a.btn-share, a.btn-share:hover, a.btn-share:focus {
 }
 a.btn-share:before {
     content: "";
-    background: url('../img/share.svg') no-repeat center center;
+    background: url('../img/share-arrow.svg') no-repeat center center;
     font-size: 1em;
-    height: 43px;
-    left: 12px;
+    height: 24px;
+    left: 10px;
     position: absolute;
-    top: 7px;
-    width: 43px;
+    top: 8px;
+    width: 24px;
 }
 .btn:active,
 a.btn:active {
     top:3px;
     border-bottom: 0;
 }
+.reset, .reset:hover, .reset:focus,
+a.reset, a.reset:hover, a.reset:focus {
+    background-color: #CB4D59;
+    background-image: none;
+    border: 0;
+    border-bottom: 3px solid #8B121E;
+    border-radius: 0;
+    color: #FEFDFD;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857;
+    outline: none;
+    padding: 5px 20px;
+    position: relative;
+    text-decoration: none;
+    vertical-align: top;
+    white-space: nowrap;
+    -moz-user-select: none;
+    -webkit-appearance: none;
+}
+.btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus {
+    background-color: #CCCCCC;
+    border-bottom: 3px solid #777777;
+    color: #777777;
+}
 /**
 * GENERAL
 * -----------------------------------------------------------------------------
@@ -585,6 +612,9 @@ noscript p {
     margin: 0;
     padding: 0;
 }
+.hidden {
+    display: none !important;
+}
 .invisible {
     visibility: hidden;
 }
@@ -611,6 +641,21 @@ noscript p {
     width: 100%;
     z-index: 10000;
 }
+#random > div {
+    margin-top: 2em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+#random > div > .btn {
+    margin: 0;
+    text-align: center;
+    width: 120px;
+}
+#random > div > .btn + .btn {
+    margin-left: 20px;
+}
 #filter {
     text-align: center;
 }

img/share-arrow.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<g transform="translate(-96.000000, -336.000000)">
+		<path fill="#FDFEFE" d="M112,344l-6-5v3c-4.5,0-8,1-10,6c3-2.5,6-3,10-2v3L112,344L112,344z"/>
+	</g>
+</svg>

img/share.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><svg version="1.1" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="Artboard-1" transform="translate(-290.000000, -406.000000)"><g id="slice" transform="translate(215.000000, 119.000000)"/><path d="M291,414 L291,430 L307,430 L307,414 L302.5,414 L302.5,415 L306,415 L306,429 L292,429 L292,415 L295.5,415 L295.5,414 L291,414 Z M295.464466,411.954468 L294.757359,411.247361 L299,407.00472 L303.242641,411.247361 L302.535534,411.954468 L299.498437,408.917371 L299.498437,422 L298.5,422 L298.5,408.918934 L295.464466,411.954468 Z" fill="#FDFEFE" id="common-share-action-outline-stroke"/></g></g></svg>

index.html

@@ -8,25 +8,25 @@
 
         <title>Kaamelott Soundboard</title>
 
-        <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
-        <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
-        <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
-        <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
-        <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
-        <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
-        <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
-        <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
-        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
-        <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
-        <link rel="icon" type="image/png" href="/favicons/android-chrome-192x192.png" sizes="192x192">
-        <link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
-        <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
-        <link rel="manifest" href="/favicons/manifest.json">
-        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
-        <link rel="shortcut icon" href="/favicons/favicon.ico">
+        <link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-touch-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-touch-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
+        <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
+        <link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
+        <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
+        <link rel="manifest" href="favicons/manifest.json">
+        <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="shortcut icon" href="favicons/favicon.ico">
         <meta name="msapplication-TileColor" content="#da532c">
-        <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
-        <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+        <meta name="msapplication-TileImage" content="favicons/mstile-144x144.png">
+        <meta name="msapplication-config" content="favicons/browserconfig.xml">
         <meta name="theme-color" content="#3f3552">
 
         <meta property="og:url" content="http://kaamelott-soundboard.2ec0b4.fr/">
@@ -45,7 +45,7 @@
         <meta itemprop="description" content="Quelques-unes des meilleures répliques sonores de Kaamelott. C'était ça ou chante Sloubi.">
         <meta itemprop="image" content="http://kaamelott-soundboard.2ec0b4.fr/img/ks.jpg">
 
-        <link rel="stylesheet" href="/css/style.css" media="screen">
+        <link rel="stylesheet" href="css/style.css" media="screen">
     </head>
     <body>
         <a class="ribbon" href="https://github.com/2ec0b4/kaamelott-soundboard" title="Contribuer">Contribuer</a>
@@ -74,6 +74,6 @@
 
         <div id="modal"></div>
 
-        <script data-main="/js/app/main" src="/bower_components/requirejs/require.js"></script>
+        <script data-main="js/app/main" src="bower_components/requirejs/require.js"></script>
     </body>
 </html>

js/app/app.js

@@ -20,6 +20,7 @@ define("app", function(require) {
             Radio.channel("App").reply("region:show", this.showRegion.bind(this));
             Radio.channel("App").reply("modal:show", this.showModal.bind(this));
             Radio.channel("Sounds").on("sound:play", this.changeUrl.bind(this));
+            Radio.channel("Sounds").on("sound:stop", this.resetUrl.bind(this));
 
             this.router = new Marionette.AppRouter();
 
@@ -46,6 +47,10 @@ define("app", function(require) {
             this.router.navigate("son/"+slug);
         },
 
+        resetUrl: function() {
+            this.router.navigate("/");
+        },
+
         showRegion: function showRegion(params) {
             this.mainRegion.show(params.view);
         },

js/app/collections/sounds.js

@@ -7,13 +7,22 @@ define("collections/sounds", function(require) {
 
     Sounds = Backbone.Collection.extend({
         model: Sound,
-        url: "/sounds/sounds.json",
+        url: "sounds/sounds.json",
         comparator: function(a, b) {
             var str1 = a.get("title"),
                 str2 = b.get("title");
 
             return str1.localeCompare(str2);
         },
+        filterByCid: function(cid) {
+            if(cid == "") {
+                return this;
+            }
+
+            return new Sounds(this.filter(function(data) {
+                return data.cid == cid;
+            }));
+        },
         filterByTitle: function(search){
             var that    = this,
                 pattern;
@@ -25,9 +34,10 @@ define("collections/sounds", function(require) {
             pattern     = new RegExp(this.removeDiacritics(search), "gi");
             return new Sounds(this.filter(function(data) {
                 pattern.lastIndex = 0;
-                
+
                 return pattern.test(that.removeDiacritics(data.get("title")))
-                    || pattern.test(that.removeDiacritics(data.get("character")));
+                    || pattern.test(that.removeDiacritics(data.get("character")))
+                    || pattern.test(that.removeDiacritics(data.get("episode")));
             }));
         },
         removeDiacritics: function(str) {

js/app/main.js

@@ -1,5 +1,5 @@
 require.config({
-    baseUrl: "/js/app",
+    baseUrl: "js/app",
     paths: {
         backbone: "../../bower_components/backbone/backbone-min",
         "backbone.radio": "../../bower_components/backbone.radio/build/backbone.radio",

js/app/models/sound.js

@@ -19,11 +19,20 @@ define("models/sound",  function(require) {
                 this.audio = new Audio("sounds/"+this.get("file"));
             }
 
-            this.audio.play();
+            var that    = this,
+                promise = this.audio.play();
+
+            if (promise !== undefined) {
+                promise.then(function(_) {
+                    that.set("playing", true);
+                }).catch(function(error) {
+                });
+            } else {
+                this.set("playing", true);
+            }
+
             this.audio.onended = this.stop.bind(this);
             this.audio.onpause = this.stop.bind(this);
-
-            this.set("playing", true);
         },
         stop: function() {
             if( this.audio && !this.audio.paused ) {

js/app/templates/random.hbs

@@ -0,0 +1,2 @@
+<button id="random" class="btn">Aléatoire</button>
+<button id="reset" class="btn" disabled>Réinitialiser</button>

js/app/templates/soundboard.hbs

@@ -2,6 +2,10 @@
 
 </div>
 
+<div id="random">
+
+</div>
+
 <div id="list">
 
 </div>

js/app/views/filter.js

@@ -20,6 +20,7 @@ define("views/filter", function(require) {
         },
         initialize: function() {
             this.channel    = Radio.channel("Sounds");
+            this.channel.on("sounds:reset", this.resetFilter.bind(this));
         },
         filterSounds: function(e) {
             var value   = this.$el.find(this.ui.searchField).val();
@@ -35,10 +36,15 @@ define("views/filter", function(require) {
             this.channel.trigger("sounds:filter", value);
         },
         resetFilter: function(e) {
-            e.preventDefault();
+            if (e) {
+                e.preventDefault();
+            }
 
             this.$el.find(this.ui.searchField).val('');
             this.$el.find(this.ui.searchForm).submit();
+        },
+        onShow: function() {
+            this.$el.find(this.ui.searchField).focus();
         }
     });
 

js/app/views/random.js

@@ -0,0 +1,43 @@
+define("views/random", function(require) {
+    "use strict";
+
+    var Marionette              = require("marionette"),
+        Radio                   = require("backbone.radio"),
+        RandomTemplate          = require("hbs!templates/random"),
+        RandomView;
+
+    RandomView = Marionette.LayoutView.extend({
+        template: RandomTemplate,
+        ui: {
+            randomButton: "#random",
+            resetButton: "#reset"
+        },
+        events: {
+            "click @ui.randomButton": "random",
+            "click @ui.resetButton": "reset"
+        },
+        initialize: function() {
+            var that = this;
+            this.channel    = Radio.channel("Sounds");
+            this.channel.on("sounds:filter", function (value) {
+                if (value == "") {
+                    return;
+                }
+                that.enableButton();
+            });
+        },
+        random: function() {
+            this.enableButton();
+            this.channel.trigger("sounds:random");
+        },
+        reset: function() {
+            this.$el.find(this.ui.resetButton).attr('disabled', 'disabled');
+            this.channel.trigger("sounds:reset");
+        },
+        enableButton: function() {
+            this.$el.find(this.ui.resetButton).removeAttr('disabled');
+        }
+    });
+
+    return RandomView;
+});

js/app/views/soundboard.js

@@ -3,6 +3,7 @@ define("views/soundboard", function(require) {
 
     var Marionette          = require("marionette"),
         SoundsFilterView    = require("views/filter"),
+        RandomView          = require("views/random"),
         SoundsView          = require("views/sounds"),
         SoundboardTemplate  = require("hbs!templates/soundboard"),
         SoundboardView;
@@ -11,6 +12,7 @@ define("views/soundboard", function(require) {
         template: SoundboardTemplate,
         regions: {
             regFilter: "#filter",
+            regRandom: "#random",
             regList: "#list"
         },
         initialize: function(options) {
@@ -18,6 +20,7 @@ define("views/soundboard", function(require) {
         },
         onShow: function() {
             this.showChildView("regFilter", new SoundsFilterView());
+            this.showChildView("regRandom", new RandomView());
             this.showChildView("regList", new SoundsView({
                 slug: this.slug
             }));

js/app/views/sounds.js

@@ -28,6 +28,8 @@ define("views/sounds", function(require) {
             this.channel    = Radio.channel("Sounds");
             this.channel.request("getSounds").then(this.initCollection.bind(this));
             this.channel.on("sounds:filter", this.filterCollection.bind(this));
+            this.channel.on("sounds:random", this.randomSound.bind(this));
+            this.channel.on("sounds:reset", this.resetCollection.bind(this));
         },
         onBeforeRender: function() {
             var sound;
@@ -52,11 +54,32 @@ define("views/sounds", function(require) {
 
             this.render();
         },
+        filterCollectionByCid: function(cid) {
+            this.collection = this.data.collection.filterByCid(cid);
+
+            this.render();
+        },
         manageSounds: function(args) {
             this.stopPlayingSound();
 
             Radio.channel("Sounds").trigger("sound:play", args.model.getSlug());
         },
+        randomSound: function() {
+            this.stopPlayingSound();
+
+            this.filterCollection("");
+            var index = Math.floor(Math.random() * Math.floor(this.collection.length));
+            var sound = this.collection.models[index];
+            this.filterCollectionByCid(sound.cid);
+
+            Radio.channel("Sounds").trigger("sound:play", sound.getSlug());
+            sound.play();
+        },
+        resetCollection: function() {
+            this.filterCollection("");
+
+            Radio.channel("Sounds").trigger("sound:stop");
+        },
         stopPlayingSound: function() {
             var playingSound    = this.collection.findWhere({playing: true});