default volume at 80%

(fix missing changelog link)

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.3] - 2020-01-12
+### Fixed
+- Fixed volume actually not getting animated after first slider movement.
+
 ## [0.1.2] - 2020-01-12
 ### Added
 - Slider styling
@@ -25,6 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - First usable version - single animation mode yet; YouTube only.
 
-[Unreleased]: https://gitlab.com/tmladek/noise-maker/compare/v0.1.1...master
+[Unreleased]: https://gitlab.com/tmladek/noise-maker/compare/v0.1.3...master
+[0.1.3]: https://gitlab.com/tmladek/noise-maker/compare/v0.1.2...v0.1.3
+[0.1.2]: https://gitlab.com/tmladek/noise-maker/compare/v0.1.1...v0.1.2
 [0.1.1]: https://gitlab.com/tmladek/noise-maker/compare/v0.1.0...v0.1.1
 [0.1.0]: https://gitlab.com/tmladek/noise-maker/-/tags/v0.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "noisemaker",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/Channel.vue

@@ -2,7 +2,7 @@
     <div :class="['channel', `channel-${loadingState}`]">
         <div class="name">{{name}}</div>
         <VolumeSlider :value="volume" :disabled="loadingState === 'unloaded'"
-                      @maxValueChange="(actualValue) => {actualVolume = actualValue}"/>
+                      @valueChange="(actualValue) => {actualVolume = actualValue}"/>
         <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
         <div class="youtube-player" ref="ytpl"/>
     </div>

src/components/VolumeSlider.vue

@@ -14,7 +14,7 @@ import {Component, Prop, Vue, Watch} from "vue-property-decorator";
 export default class Channel extends Vue {
   private name = "VolumeSlider";
 
-  private maxValue = 50;
+  private maxValue = 80;
   @Prop() public value!: number;
   @Prop() public disabled!: boolean;
 
@@ -22,9 +22,10 @@ export default class Channel extends Vue {
     this.onMaxValueChange();
   }
 
+  @Watch("value")
   @Watch("maxValue")
   private onMaxValueChange() {
-    this.$emit("maxValueChange", this.value * (this.maxValue / 100), this.maxValue);
+    this.$emit("valueChange", this.value * (this.maxValue / 100), this.maxValue);
   }
 };
 </script>