minimal-music-project 0.0.7 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83c6d910205c9328757cf56b0c2e50df907fedcd650966b0b9898cbd3fb51aaa
-  data.tar.gz: cc1222e1c478d9cb01840d7567b99b354251c5c29c7255446d8463c7293a602d
+  metadata.gz: edd9c6b971a10e388ca18b42699c6bc9a76948bc90d1a270478f8dbd86d659c2
+  data.tar.gz: '096ce7fdcfc914bced72f2c936cbd0a8babe65cc2ce141d9752f143aeb49418b'
 SHA512:
-  metadata.gz: 3c2952ee9d4a34a6e3eabed59790d60a14937e5bbe8d95ca79a573fcd15aa70a84e9999eaa9ff499335fda3b418f8146f7bfb3f9f7ffb747e81761c255fba879
-  data.tar.gz: 99af8f826d34e242fc443712a3396bb7b511c3c405072bba1c2731cf766ddb0a981b9bef7725bd527598a58ebda18439f4943edc2959bcf011f244e8c60ef3e7
+  metadata.gz: 4baaf80ffac9e6de479ec022ac1aee2774f6297df00907e44ef23503dc7c6345978cf3fca5e9d57546a5b8e9e0c261627312e6aba789f1a18a4a5ef837266779
+  data.tar.gz: 0f3beda45e38193f7d90266be68a1174c881eb28bf92535a43beb2d862318bba2a6c635f0606ea4b5fa351cdb01f4402f45dda0d71d7d5833677522688a1b7a9

data/README.md

@@ -67,6 +67,7 @@ Structure of `_data/menu.yml`:
 Structure of `_data/metaData.yml`:
 * author: Site Author name
 * logo: relative url to the logo
+* clickToEnlargeImages: boolean value to enable/disable "full-screen" images on click
 * cookies: customize information about site cookies
     * enabled: determine if should show cookies pop-up
     * message: text on cookie pop-up
@@ -84,6 +85,18 @@ 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
 
+## Posts front matter parameters
+
+### Embedding media
+Each post can have it's own associated player. Information on how to embed the player should be described under *embed\_player* parameter. Each player should have at least two parameters: *src* and *type*, where *type* will define on how to fill *src*. Supported types:
+
+* soundcloud - src should be full url to song
+* bandcamp - on a "embed song" option on bandcamp, everything after *EmbeddedPlayer/* in generated code should be put to src parameter in front matter
+* spotify - src should be id of the song. It can be acquired via "copy song link", e.g. for url https://open.spotify.com/track/67IdIp2ij8oqTFsSguvy2I?si=f735480b74414902 the src should be 67IdIp2ij8oqTFsSguvy2I
+* youtube - src should be the *v* uri parameter, e.g. for url https://www.youtube.com/watch?v=dfdruxvE9-0 the src should be dfdruxvE9-0
+* anchor.fm - src is the full episode name (e.g. for URL https://anchor.fm/sucias/episodes/Not-All-Men-e15v6dv src should be Not-All-Men-e15v6dv)
+* audio_file - src should be path to file. Additionaly, required properties are name of the song (it will display in player) and boolean value *is\_relative\_url* (for easy access to files served from the same domain)
+
 ## Contributing
 
 Bug reports and pull requests are welcome on [GitHub](https://github.com/ItsMeaga1n/minimal-music-project). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

data/_data/metaData.yml

@@ -1,5 +1,6 @@
 author: Site Author
 logo: assets/img/band_logo.png
+clickToEnlargeImages: True
 cookies:
   enabled: True
   message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!

data/_includes/common.js

@@ -2,4 +2,62 @@
     window.toggleExpander = function toggleExpander(x) {
         document.getElementsByClassName("menu")[0].classList.toggle("expanded");
     }
+    window.addEventListener("load", () => {
+        // #region click to enlarge images 
+        const images = document.querySelectorAll("img[click-to-enlarge]");
+        images.forEach(img => {
+            {% if site.data.metaData.clickToEnlargeImages %}
+            img.addEventListener("click", () => {
+                const src = img.attributes.getNamedItem("src");
+                const modal = document.createElement("div");
+                const removeModal = function() {
+                    document.body.removeChild(modal);
+                };
+                modal.classList.add("modal__picture-zoomed");
+                modal.style.backgroundImage = `URL("${src.value}")`;
+                modal.addEventListener("click", removeModal);
+                document.body.append(modal);
+                document.body.addEventListener("keyup", e => {
+                    if (e.key === 'Escape') {
+                        removeModal();
+                    }
+                }, {once : true})
+            });
+            {% else %}
+            img.removeAttribute("click-to-enlarge");
+            {% endif %}
+        });
+        // #endregion click to enlarge images 
+        // #region embedded audio players
+        const players = document.querySelectorAll("iframe.embedded-player");
+        const getParamsByPlayerType = (src, type) => {
+            const rt = (src, height) => ({
+                src: src,
+                height: height
+            });
+            switch (type.toLocaleLowerCase()) {
+                case "soundcloud":
+                    return rt(`https://w.soundcloud.com/player/?url=${src}`, 125);
+                case "bandcamp":
+                    return rt(`https://bandcamp.com/EmbeddedPlayer/${src}`, 125);
+                case "spotify":
+                    return rt(`https://open.spotify.com/embed/track/${src}`, 80);
+                case "youtube":
+                    return rt(`https://www.youtube.com/embed/${src}`, 350);
+                case "anchor.fm":
+                    return rt(`https://anchor.fm/sucias/embed/episodes/${src}`,102);
+                default:
+                    return rt(src, 125);
+            }
+        };
+        players.forEach(player => {
+            const givenSrc = player.getAttribute("givenSrc");
+            const type = player.getAttribute("type");
+            const { src, height } = getParamsByPlayerType(givenSrc, type);
+            player.setAttribute("src", src);
+            player.setAttribute("height", height);
+            player.classList.remove("hidden");
+        });
+        // #endregion embedded audio players
+    });
 })();

data/_includes/discography-entry-metadata.html

@@ -59,22 +59,19 @@
     {% endfor %}
 </p>
 {% endif %}
-{% if include.currPost.play_here %}
-{% include music-player.html audioData=include.currPost.play_here %}
-{% endif %}
-{% if include.currPost.play_soundcloud_embed %}
-<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;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
-    <a href="{{ include.currPost.play_soundcloud_embed.artist_href }}" title="{{ include.currPost.play_soundcloud_embed.artist_title }}" target="_blank"
-        style="color: #cccccc; text-decoration: none;">{{ include.currPost.play_soundcloud_embed.artist_title }}</a> · <a
-        href="{{ include.currPost.play_soundcloud_embed.song_href }}"
-        title="{{ include.currPost.play_soundcloud_embed.song_title }}" target="_blank"
-        style="color: #cccccc; text-decoration: none;">{{ include.currPost.play_soundcloud_embed.song_title }}</a></div>
+
+{% if include.currPost.embed_player %}
+    {% if include.currPost.embed_player.type ==	"audio_file" %}
+        {% include music-player.html audioData=include.currPost.embed_player %}
+    {% else %}
+        <iframe
+            class="embedded-player hidden"
+            givenSrc="{{include.currPost.embed_player.src}}"
+            type="{{include.currPost.embed_player.type}}"
+            allow="encrypted-media; picture-in-picture"
+            height="80"
+            frameborder="0"
+            scrolling="no">
+        </iframe>
+    {% endif %}
 {% endif %}
-{% if include.currPost.play_bandcamp_embed %}
-<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

@@ -2,7 +2,7 @@
     <header>
         <figure class="discography-album_cover-wrapper">
             <div class="discography-album_cover">
-                <img src="{{ include.currPost.image | relative_url }}" alt="{{ page.image_alt }}" />
+                <img click-to-enlarge src="{{ include.currPost.image | relative_url }}" alt="{{ page.image_alt }}" />
             </div>
         </figure>
     </header>

data/_layouts/post.html

@@ -10,7 +10,7 @@ layout: default
             {% if page.image %}
                 <figure class="post-cover">
             <!-- TODO: Images for diffrent screen size -->
-                    <img src="{{ page.image | relative_url }}" alt="{{ page.image_alt }}" class="post-cover_image" />
+                    <img click-to-enlarge src="{{ page.image | relative_url }}" alt="{{ page.image_alt }}" class="post-cover_image" />
                 </figure>
             {% endif %}
         </header>

data/_layouts/posts_feed.html

@@ -23,7 +23,7 @@ category: home
             </header>
             <section>
                 <figure>
-                    <img src="{{ post.image | relative_url }}" alt="{{ page.image_alt }}" class="post-feed_image" />
+                    <img click-to-enlarge src="{{ post.image | relative_url }}" alt="{{ page.image_alt }}" class="post-feed_image" />
                 </figure>
                 <p>
                     {{ post.description }}

data/_sass/styles/_defaults.scss

@@ -102,6 +102,13 @@ img {
     margin: 0;
     vertical-align: top;
     object-fit: cover;
+    &[click-to-enlarge] {
+        cursor: zoom-in;
+        &:hover {
+            box-shadow: 0 0 8px $black;
+            transition: all 0.4s ease-in-out 0.1s;
+        }
+    }
 }
 
 @include mobile {

data/_sass/styles/_embedded-player.scss

@@ -0,0 +1,9 @@
+.embedded-player {
+    width: 100%;
+    max-width: 600px;
+    outline: none;
+    border: none;
+    &.hidden {
+        visibility: hidden;
+    }
+}

data/_sass/styles/_index.scss

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

data/_sass/styles/_modal.scss

@@ -0,0 +1,19 @@
+.modal {
+    &__picture-zoomed {
+        background-color: RGBA(0,0,0,0.5);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: auto;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: 10000;
+        top: 0;
+        left: 0;
+        cursor: zoom-out;
+        transition: all 0.4s ease-in-out 0.2s;
+        @include mobile {
+            background-size: contain;
+        }
+    }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: minimal-music-project
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.1.0
 platform: ruby
 authors:
 - Patryk Bieszke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-09-07 00:00:00.000000000 Z
+date: 2021-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -59,9 +59,11 @@ files:
 - _sass/styles/_cookies.scss
 - _sass/styles/_defaults.scss
 - _sass/styles/_discography.scss
+- _sass/styles/_embedded-player.scss
 - _sass/styles/_index.scss
 - _sass/styles/_layout.scss
 - _sass/styles/_menu.scss
+- _sass/styles/_modal.scss
 - _sass/styles/_music-player.scss
 - _sass/styles/_post.scss
 - _sass/styles/_posts_feed.scss