minimal-music-project 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0b1d1a024bc519ef5fdb0314a3799b58e12239be7da3149eca057d0f94791e1
-  data.tar.gz: abbfbad511137ee1760800c26b44bdb5747abe281ad46f5ae4a80dd42f416248
+  metadata.gz: 7029cd275a130708b0e8907e9cbafafdd4db04d320d360cdd2981df5a1c27816
+  data.tar.gz: 3ca7c7261be1e1235f55f9716f403fb935a3be00d9a43940ffd676f4ed83cc2a
 SHA512:
-  metadata.gz: 0b1177c34686ba44c9e74b06ce6e1a995d3d34886dadfe10931c694287a78e97af5ea4d0ca3ca28b57d00df74ad9d953fe1932487e7ba31de3b593cc03f5bcb9
-  data.tar.gz: d635b9d6eedc02d93a48fe4233b3eb064dc61089d46867c52f08601803d38104c3db5d8e7c0818c3c2773fe822fe7fa5003c262c0bbdebad480c2b37518808b2
+  metadata.gz: 36fbe1c4792c2837c0c5e3c8830a95e8a699af3a92b42e389d7e6f28956420b2de1ec0ee6afc394bb82462e5854cb99496795c7678e0651b12917fd35bf4b671
+  data.tar.gz: aa837c3aab72920f119f45477bfe5f1797044a2e162e2989a6c2fb15b175e1b67d69d133045aef525976572b6a12816bcd13c6593c1fb668e45b718928ec8109

data/README.md

@@ -44,8 +44,16 @@ Structure of `_data/menu.yml`:
     * tooltip: Tooltip for menu item
 
 Structure of `_data/metaData.yml`:
-author: Site Author name
-avatar_url: URL for avatar (for about page)
+* author: Site Author name
+* logo: URL for logo image  (displayed on top of menu)
+* cookies: customize information about site cookies
+    * enabled: determine if should show cookies pop-up
+    * message: text on cookie pop-up
+    * agreeButtonText: text on agree button
+
+Structure of `_data/customs.yml`:
+* custom-css: a list of urls to custom css files
+* custom-js: a list of urls to custom javascript files
 
 ## Contributing
 
@@ -63,4 +71,4 @@ To add a custom directory to your theme-gem, please edit the regexp in `minimal-
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
+Custom Volume Slider was developed with the fundaments based on [codepen project](https://codepen.io/EmNudge/pen/rRbLJQ), thus this component is licensed under [Copyright (c) 2021 by EmNudge](https://codepen.io/EmNudge/pen/rRbLJQ).

data/_config.yml

@@ -1,22 +1,7 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
 title: minimal-music-project
 tagline: A site showing the usage of Jekyll custom theme
 email: email@example.com
-description: >- # this means to ignore newlines until "baseurl:"
+description: >- 
   This website was created as a demonstration for Jekyll custom theme
   named minimal-music-project. Its main feature is to make it easy to create
   websites for music projects
@@ -28,7 +13,7 @@ twitter:
   card: summary
 plugins:
   - jekyll-seo-tag
-
+  - jekyll-feed
 # Build settings
 markdown: kramdown
 remote_theme: ItsMeaga1n/minimal-music-project

data/_data/menu.yml

@@ -27,4 +27,7 @@ menu_contacts:
   target: _blank
 - faicon: fas fa-envelope
   url:
-  target: 
+  target: 
+- faicon: fas fa-rss
+  url: /feed.xml
+  target: _blank

data/_includes/common-head.html

@@ -3,6 +3,8 @@
 <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
 <link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
 <script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
+
+<!-- favicon -->
 <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/apple-touch-icon.png' | relative_url }}">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/favicon-32x32.png' | relative_url }}">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/img/favicon-16x16.png' | relative_url }}">
@@ -12,5 +14,9 @@
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="msapplication-config" content="{{ '/assets/img/browserconfig.xml' | relative_url }}">
 <meta name="theme-color" content="#ffffff">
+
+<!-- feed -->
+<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "feed.xml" | relative_url }}">
+
 {% include customizations.html %}
 {% seo %}

data/_includes/discography-entry-metadata.html

@@ -60,13 +60,10 @@
 </p>
 {% endif %}
 {% if include.currPost.play_here %}
-<audio controls>
-    <source src="{{ include.currPost.play_here.src }}" type="{{ include.currPost.play_here.type }}">
-    Your browser does not support the audio element.
-</audio>
+{% include music-player.html audioData=include.currPost.play_here %}
 {% endif %}
 {% if include.currPost.play_soundcloud_embed %}
-<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
+<iframe width="100%" height="110" scrolling="no" frameborder="no" allow="autoplay"
     src="{{ include.currPost.play_soundcloud_embed.src }}"></iframe>
 <div
     style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
@@ -77,7 +74,7 @@
         style="color: #cccccc; text-decoration: none;">{{ include.currPost.play_soundcloud_embed.song_title }}</a></div>
 {% endif %}
 {% if include.currPost.play_bandcamp_embed %}
-<iframe style="border: 0; width: 100%; height: 42px;"
-    src="{{ include.currPost.play_bandcamp_embed.src }}"
-    seamless><a href="{{ include.currPost.play_bandcamp_embed.href }}">{{ include.currPost.play_bandcamp_embed.title }}</a></iframe>
-{% endif %}
+<iframe style="border: 0; width: 100%; height: 120px;"
+    src="{{ include.currPost.play_bandcamp_embed.src }}" seamless>
+    <a href="{{ include.currPost.play_bandcamp_embed.href }}">{{ include.currPost.play_bandcamp_embed.title }}</a></iframe>
+{% endif %}

data/_includes/discography-entry.html

@@ -17,7 +17,7 @@
                 </h2>
             </a>
             <p class="discography-album_summary">
-                {{ include.currPost.summary }}
+                {{ include.currPost.description }}
             </p>
             {% include discography-entry-metadata.html currPost=include.currPost %}
         </section>

data/_includes/music-player.html

@@ -0,0 +1,123 @@
+<div class="audio-player" id="{{ include.audioData.src }}" >
+    <!-- Audio player inspired by https://codepen.io/EmNudge/pen/rRbLJQ -->
+    <div class="timeline">
+        <div class="progress"></div>
+    </div>
+    <div class="controls">
+        <div class="play-controller">
+            <i class="fas fa-play"></i>
+        </div>
+        <div class="time">
+            <div class="current">0:00</div>
+            <div class="divider">/</div>
+            <div class="length"></div>
+        </div>
+        <div class="name">Music Song</div>
+        <div class="volume-container">
+            <div class="volume-controller">
+                <i class="fas fa-volume-up"></i>
+            </div>
+
+            <div class="volume-slider">
+                <div class="volume-percentage"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const audioPlayer = document.getElementById("{{ include.audioData.src }}");
+    const audio = new Audio(
+        {% if include.audioData.is_relative_url %}
+        "{{ include.audioData.src | relative_url }}"
+        {% else %}
+        "{{ include.audioData.src }}"
+        {% endif %}
+    );
+
+    audio.addEventListener(
+        "loadeddata",
+        () => {
+            audioPlayer.querySelector(".time .length").textContent = getTimeCodeFromNum(
+                audio.duration
+            );
+            audioPlayer.querySelector(".name").textContent = "{{ include.audioData.name }}";
+            audio.volume = .75;
+        },
+        false
+    );
+
+
+    //click on timeline to skip around
+    const timeline = audioPlayer.querySelector(".timeline");
+    timeline.addEventListener("click", e => {
+        const timelineWidth = window.getComputedStyle(timeline).width;
+        const timeToSeek = e.offsetX / parseInt(timelineWidth) * audio.duration;
+        audio.currentTime = timeToSeek;
+    }, false);
+
+    //click volume slider to change volume
+    const volumeSlider = audioPlayer.querySelector(".controls .volume-slider");
+    volumeSlider.addEventListener('click', e => {
+        const sliderWidth = window.getComputedStyle(volumeSlider).width;
+        const newVolume = e.offsetX / parseInt(sliderWidth);
+        audio.volume = newVolume;
+        audioPlayer.querySelector(".controls .volume-percentage").style.width = newVolume * 100 + '%';
+    }, false)
+
+    const playBtn = audioPlayer.querySelector(".controls .play-controller i");
+    playBtn.addEventListener(
+        "click",
+        () => {
+            playBtn.classList = "fas";
+            if (audio.paused) {
+                playBtn.classList.add("fa-pause");
+                audio.play();
+            } else {
+                playBtn.classList.add("fa-play");
+                audio.pause();
+            }
+        },
+        false
+    );
+
+    const intervalId = setInterval(() => {
+        if(audio.paused) {
+            return;
+        }
+        const progressBar = audioPlayer.querySelector(".progress");
+        progressBar.style.width = audio.currentTime / audio.duration * 100 + "%";
+        audioPlayer.querySelector(".time .current").textContent = getTimeCodeFromNum(
+            audio.currentTime
+        );
+    }, 200);
+
+    audioPlayer.querySelector(".volume-controller").addEventListener("click", () => {
+        const volumeEl = audioPlayer.querySelector(".controls .volume-controller i");
+        audio.muted = !audio.muted;
+        volumeEl.classList = "fas";
+        if (audio.muted) {
+            volumeEl.classList.add("fa-volume-mute");
+        } else {
+            volumeEl.classList.add("fa-volume-up");
+        }
+    });
+    
+
+    /**
+     * turn 128 seconds into 2:08 
+    **/
+    function getTimeCodeFromNum(num) {
+        let seconds = parseInt(num);
+        let minutes = parseInt(seconds / 60);
+        seconds -= minutes * 60;
+        const hours = parseInt(minutes / 60);
+        minutes -= hours * 60;
+
+        if (hours === 0) return `${minutes}:${String(seconds % 60).padStart(2, 0)}`;
+        return `${String(hours).padStart(2, 0)}:${minutes}:${String(
+            seconds % 60
+        ).padStart(2, 0)}`;
+    }
+
+</script>

data/_layouts/discography.html

@@ -6,6 +6,7 @@ layout: default
         {{ content }}
         {% for post in site.posts %}
         {% if post.categories contains page.category %}
+        <hr>
         {% include discography-entry.html currPost=post %}
         {% endif %}
         {% endfor %}

data/_layouts/posts_feed.html

@@ -26,7 +26,7 @@ category: home
                     <img src="{{ post.image | relative_url }}" alt="{{ page.image_alt }}" class="post-feed_image" />
                 </figure>
                 <p>
-                    {{ post.summary }}
+                    {{ post.description }}
                 </p>
             </section>
             {% include read-more.html currPost=include.currPost %}

data/_sass/styles/_cookies.scss

@@ -2,7 +2,7 @@
     position: fixed;
     padding: 20px 15px;
     z-index: $pop-ups-z-1;
-    background-image: radial-gradient(farthest-corner at 25% 0, $black, $black);
+    background-image: radial-gradient(farthest-corner at 25% 0, $white, $white);
     box-shadow: 0 0 6px 0 $black;
     text-align: center;
     opacity: 0.95;
@@ -28,16 +28,16 @@
         font-weight: 700;
         display: inline-block;
         padding: 10px 20px;
-        background-color: $black;
+        background-color: $white;
         color: $p_text;
-        border: none;
+        border: 1px solid;
         border-radius: 3px;
         text-decoration: none;
         cursor: pointer;
         -webkit-transition: background-color 200ms;
         transition: background-color 200ms;
         &:hover {
-            background-color: $black;
+            background-color: rgb(168, 168, 168);
         }
     }
     @include mobile {

data/_sass/styles/_defaults.scss

@@ -94,13 +94,13 @@ audio {
 .read-more {
     position: absolute;
     right: 10px;
-    bottom: -1em;
-    font-size: 0.9em;
+    bottom: -2em;
     line-height: 1em;
     font-weight: 300;
     padding-bottom: 0.5em;
     color: #000000;
     a {
+        font-size: 0.9em;
         &:hover {
             text-decoration: underline;
         }

data/_sass/styles/_discography.scss

@@ -23,6 +23,9 @@
         a:hover {
             text-decoration: underline $p_text;
         }
+        section {
+            width: 100%;
+        }
 
         &_title {
             margin-top: 3vw;

data/_sass/styles/_index.scss

@@ -4,4 +4,5 @@
 @import './posts_feed';
 @import './post';
 @import './cookies';
-@import './discography';
+@import './discography';
+@import './music-player.scss';

data/_sass/styles/_menu.scss

@@ -34,8 +34,8 @@
             }
         }
     }
-    ul {
-        li {
+    ul, ol, dl {
+        li, dt {
             list-style: none;
             margin-bottom: 8px;
             margin-top: 8px;

data/_sass/styles/_posts_feed.scss

@@ -11,11 +11,6 @@ $image-dim: 192px;
         width: 100%;
         position: relative;
     }
-    .page-summary {
-        flex: 0;
-        width: 100%;
-        text-align: center;
-    }
     h1 {
         flex: 0;
         margin: auto;

data/_sass/styles/music-player.scss

@@ -0,0 +1,92 @@
+
+.audio-player {
+    height: 40px;
+    width: 100%;
+
+    color: white;
+    font-size: 0.75em;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 8px auto;
+
+    background: linear-gradient( #888, black);
+    box-shadow: 0 0 0.5em 0 #666;
+    margin-bottom: 1em;
+
+    .timeline {
+      background: rgb(139, 139, 139);
+      box-shadow: 0 2px 8px 0 #0008;
+      width: 100%;
+      position: relative;
+      cursor: pointer;
+      .progress {
+        background: rgb(52, 31, 247);;
+        height: 100%;
+        width: 0;
+        transition: 0.2s;
+      }
+    }
+    
+    .controls {
+      padding: 0 15px;
+      display: flex;
+      justify-content: space-between;
+  
+      > * {
+        display: flex;
+        align-items: center;
+      }
+
+      .play-controller {
+        font-size: 1.4em;
+        &:hover {
+          text-shadow: 0 0 20px white;
+        }
+      }
+      .time {
+        display: flex;
+  
+        > * {
+          padding: 2px;
+        }
+      }
+      .volume-container {
+        cursor: pointer;
+        .volume-controller {
+          height: 26px;
+          width: 10px;
+          display: flex;
+          align-items: center;
+          .volume {
+            transform: scale(0.7);
+          }
+        }
+        
+        position: relative;
+        z-index: 2;
+        .volume-slider {
+          position: absolute;
+          left: -3px; 
+          top: 0;
+          z-index: -1;
+          width: 0;
+          height: 100%;
+          background: white;
+          box-shadow: 0 0 20px #000a;
+          transition: .25s;
+          .volume-percentage {
+            height: 100%;
+            width: 75%;
+            background: rgb(52, 31, 247);
+        }
+        }
+        &:hover {
+          .volume-slider {
+            left: -123px;
+            width: 120px;
+          }
+        }
+      }
+    }
+  }
+  

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: minimal-music-project
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Patryk Bieszke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-30 00:00:00.000000000 Z
+date: 2021-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -45,6 +45,7 @@ files:
 - _includes/discography-entry.html
 - _includes/footer.html
 - _includes/menu.html
+- _includes/music-player.html
 - _includes/read-more.html
 - _layouts/default.html
 - _layouts/discography.html
@@ -59,6 +60,7 @@ files:
 - _sass/styles/_menu.scss
 - _sass/styles/_post.scss
 - _sass/styles/_posts_feed.scss
+- _sass/styles/music-player.scss
 - _sass/variables/_colors.scss
 - _sass/variables/_index.scss
 - _sass/variables/_layout.scss