diff --git a/build/icons/radionova.icns b/build/icons/radionova.icns new file mode 100644 index 0000000..20aca09 Binary files /dev/null and b/build/icons/radionova.icns differ diff --git a/build/icons/radionova.ico b/build/icons/radionova.ico new file mode 100644 index 0000000..75a6fcb Binary files /dev/null and b/build/icons/radionova.ico differ diff --git a/build/icons/radionova.png b/build/icons/radionova.png new file mode 100644 index 0000000..2b46618 Binary files /dev/null and b/build/icons/radionova.png differ diff --git a/package.json b/package.json index c618eac..8302d6a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "radionova", - "version": "v0.1.1", + "version": "v0.2.0", "author": "Romain Le Polh ", "description": "Radio Nova (FR) Player", "license": "MIT", @@ -45,10 +45,10 @@ ] }, "mac": { - "icon": "build/icons/icon.icns" + "icon": "build/icons/radionova.icns" }, "win": { - "icon": "build/icons/icon.ico" + "icon": "build/icons/radionova.ico" }, "linux": { "icon": "build/icons" diff --git a/src/renderer/assets/play-noise.png b/src/renderer/assets/play-noise.png new file mode 100644 index 0000000..e9aac1b Binary files /dev/null and b/src/renderer/assets/play-noise.png differ diff --git a/src/renderer/assets/play-noise@2x.png b/src/renderer/assets/play-noise@2x.png new file mode 100644 index 0000000..3ec758e Binary files /dev/null and b/src/renderer/assets/play-noise@2x.png differ diff --git a/src/renderer/components/HomePage.vue b/src/renderer/components/HomePage.vue index 64d1554..fae0260 100644 --- a/src/renderer/components/HomePage.vue +++ b/src/renderer/components/HomePage.vue @@ -7,10 +7,28 @@

{{ title }}

{{ subtitle }}

 -
- - - +
+ +
+
+ +
+
@@ -84,7 +102,7 @@ } }, player: function (player) { - // player.play() + player.play() } }, @@ -109,17 +127,24 @@ Vibrant.from(this.image).getPalette(function (err, palette) { if (err) { - console.log(err) vm.textColor = '#fff' } else { if (palette.Muted) { vm.textColor = palette.Muted.getBodyTextColor() vm.backgroundColor = palette.Muted.getHex() } - console.log(palette) } }) }, + toggleMute () { + if (this.player.isMuted()) { + this.player.toggleMute() + this.mute = false + } else { + this.player.toggleMute() + this.mute = true + } + }, open (link) { this.$electron.shell.openExternal(link) @@ -131,6 +156,12 @@ } }, + getInvertTextColor: function () { + return { + color: this.backgroundColor + } + }, + getBackgroundColor: function () { return { backgroundColor: this.backgroundColor, @@ -185,18 +216,15 @@ margin: 0; padding: 0; } - .hidden { display: none; } - .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } - [class^="socicon-"], [class*=" socicon-"] { font-family: 'Socicon' !important; @@ -209,18 +237,94 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - body { overflow: hidden; -ms-overflow-style: scrollbar; -webkit-app-region: drag; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } - .plyr--audio { display: none; } + $background: #f9f9f9; + $foreground: #fff; + + $foreground-light: #34495e; + $size: 10px; + $ratio: .2; + $transition-time: 0.3s; + + .toggle-mute { + width: 60px; + height: 60px; + background: transparent url(../assets/play-noise.png) no-repeat center center; + margin-left: 0; + text-align: center; + padding-top: 10px; + float: left; + } + .play { + display:block; + width: 0; + height: 0; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid $foreground; + margin: 15px auto; + position: relative; + z-index:1; + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; + + &:before { + content: ''; + position: absolute; + top: ($size*-1.5); + left: -20px; + bottom: ($size*-1.5); + right: -10px; + border-radius: 50%; + border: ($size*0.2) solid $foreground; + z-index: 2; + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; + } + &:after { + content:''; + opacity:0; + transition: opacity ($transition-time * 2); + -webkit-transition: opacity ($transition-time * 2); + -moz-transition: opacity ($transition-time * 2); + } + + &:hover, &:focus { + &:before { + transform: scale(1.1); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + } + } + + &.muted { + border-color:transparent; + &:after { + content: ''; + opacity: 1; + width: 8px; + height: 12px; + background: $foreground; + position: absolute; + right: -1px; + top: -6px; + border-left: ($size*0.4) solid $foreground; + box-shadow: inset ($size*0.6) 0 0 0 $background; + } + } + } + #wrapper { height: 100vh; width: 100vw; @@ -229,15 +333,15 @@ &.has-link:hover { - /*.links { + .meta { -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transform: translateY(-60px); - }*/ - .meta { + } + .links { -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; - transform: translateY(0px); + transform: translateY(-60px); } } @@ -258,28 +362,36 @@ .links { width: 100%; background: #F55656; - text-align: center; - padding: 15px 12px 15px; + padding: 0; -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; height: 60px; + bottom: -60px; + position: absolute; + + + .social-list { + text-align: center; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + background: #333; + a { + margin: 0 15px; + } + } a { text-decoration: none; font-size: 2em; display: inline-block; vertical-align: middle; color: white; - -webkit-transition: transform 0.3s ease-in-out; - transition: transform 0.3s ease-in-out; - margin: 0 10px; - &:hover { - transform: translateY(-5%); - } &.socicon-spotify { - color: inherit; + margin-top: -6px; &:before { background: #fff; - color: inherit; + color: #333; width: 1.4em; height: 1.4em; -webkit-border-radius: 500px; @@ -303,7 +415,6 @@ left: 0; bottom: 0px; padding: 10px 12px 10px; - transform: translateY(60px); } h1, h2 { color: #fff; diff --git a/static/icon.png b/static/icon.png deleted file mode 100755 index 3498697..0000000 Binary files a/static/icon.png and /dev/null differ diff --git a/static/icon@2x.png b/static/icon@2x.png deleted file mode 100755 index a2a8f0a..0000000 Binary files a/static/icon@2x.png and /dev/null differ diff --git a/static/iconTemplate.png b/static/iconTemplate.png deleted file mode 100644 index 508a156..0000000 Binary files a/static/iconTemplate.png and /dev/null differ diff --git a/static/iconTemplate@2x.png b/static/iconTemplate@2x.png deleted file mode 100644 index 403ce62..0000000 Binary files a/static/iconTemplate@2x.png and /dev/null differ diff --git a/static/screenshot.jpeg b/static/screenshot.jpeg index 1da591c..e56d5b6 100644 Binary files a/static/screenshot.jpeg and b/static/screenshot.jpeg differ