Skip to content

Commit

Permalink
changed Material SVG to Material CSS Webfont icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniel-jettka
daniel-jettka committed Jun 19, 2024
1 parent e9c9975 commit 57e5106
Showing 1 changed file with 53 additions and 51 deletions.
104 changes: 53 additions & 51 deletions edirom-audio-player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,38 @@ class EdiromAudioPlayer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });

//Define a FontFace
const font = new FontFace("Material Symbols Outlined", "url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v192/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2)", {
style: "normal",
weight: "100 700"
});

// wait for font
font.load().then( (loaded_face)=> {
document.fonts.add(loaded_face)

// append content
this.shadowRoot.innerHTML = `
<style>
.mso {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
</style>
`;
}).catch((error)=>{});
}

// connect component
Expand Down Expand Up @@ -31,7 +62,7 @@ class EdiromAudioPlayer extends HTMLElement {

// render component
render() {
this.shadowRoot.innerHTML = `
this.shadowRoot.innerHTML += `
${this.getCSS()}
${this.getPlayerHTML()}
`;
Expand All @@ -45,7 +76,7 @@ class EdiromAudioPlayer extends HTMLElement {
getPlayerHTML() {

let playerInnerHTML;
playerInnerHTML = this.getControlsHTML(['prev', 'play', 'next', 'tracksRemove']);
playerInnerHTML = this.getControlsHTML(['skip_previous', 'play_arrow', 'skip_next', 'playlist_remove']);
playerInnerHTML += this.getTimeHTML();
playerInnerHTML += this.getTracksHTML();

Expand All @@ -57,7 +88,7 @@ class EdiromAudioPlayer extends HTMLElement {

const tracks = JSON.parse(this.getAttribute('tracks'));
const currentTrack = tracks[this.getAttribute('track')];
const trackSteps = [ { "replay": "0" }, { "prev": "-1" }, { "next": "+1" } ];
const trackSteps = [ { "replay": "0" }, { "skip_previous": "-1" }, { "skip_next": "+1" } ];

let controlsDiv = document.createElement('div');
controlsDiv.id = 'controls';
Expand Down Expand Up @@ -90,8 +121,8 @@ class EdiromAudioPlayer extends HTMLElement {
buttonElem.dataset.trackstep = trackSteps.find(step => step[button])[button];
}

// Add SVG to button
buttonElem.innerHTML = this.svg(button);
// Add icon to button
buttonElem.innerHTML = '<span class="mso">'+button+'</span>';

// Append button to controlsDiv
controlsDiv.appendChild(buttonElem);
Expand Down Expand Up @@ -147,14 +178,9 @@ class EdiromAudioPlayer extends HTMLElement {
border: none;
background: none;
}
#controls button svg {
height: 24px;
width: 24px;
margin: 5px;
}
#controls #replayButton,
#controls #forwardButton,
#controls #rewindButton {
#controls #fast_forwardButton,
#controls #fast_rewindButton {
display: none;
}
#timeInfo {
Expand Down Expand Up @@ -200,10 +226,10 @@ class EdiromAudioPlayer extends HTMLElement {
/* width-dependent rules */
@container player (width > 380px){
@container player (width > 380px){
#controls #replayButton,
#controls #forwardButton,
#controls #rewindButton {
#controls #fast_forwardButton,
#controls #fast_rewindButton {
display: inline-block;
}
}
Expand All @@ -212,30 +238,6 @@ class EdiromAudioPlayer extends HTMLElement {
}



svg(iconName){

/* Icon source: https://fonts.google.com/icons?icon.query=play */
const icons = {
"play" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-203v-560l440 280-440 280Zm60-280Zm0 171 269-171-269-171v342Z"/></svg>',
"pause" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M525-200v-560h235v560H525Zm-325 0v-560h235v560H200Zm385-60h115v-440H585v440Zm-325 0h115v-440H260v440Zm0-440v440-440Zm325 0v440-440Z"/></svg>',
"next" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M680-240v-480h60v480h-60Zm-460 0v-480l346 240-346 240Zm60-240Zm0 125 181-125-181-125v250Z"/></svg>',
"prev" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M220-240v-480h60v480h-60Zm520 0L394-480l346-240v480Zm-60-240Zm0 125v-250L499-480l181 125Z"/></svg>',
"rewind" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M854-240 508-480l346-240v480Zm-402 0L106-480l346-240v480Zm-60-240Zm402 0ZM392-355v-250L211-480l181 125Zm402 0v-250L613-480l181 125Z"/></svg>',
"forward" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M104-240v-480l346 240-346 240Zm407 0v-480l346 240-346 240ZM164-480Zm407 0ZM164-355l181-125-181-125v250Zm407 0 181-125-181-125v250Z"/></svg>',
"replay" : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-80q-75 0-140.5-28T225-185q-49-49-77-114.5T120-440h60q0 125 87.5 212.5T480-140q125 0 212.5-87.5T780-440q0-125-85-212.5T485-740h-23l73 73-41 42-147-147 147-147 41 41-78 78h23q75 0 140.5 28T735-695q49 49 77 114.5T840-440q0 75-28 140.5T735-185q-49 49-114.5 77T480-80Z"/></svg>',
"tracksAdd" : '<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M120-330v-60h300v60H120Zm0-165v-60h470v60H120Zm0-165v-60h470v60H120Zm530 500v-170H480v-60h170v-170h60v170h170v60H710v170h-60Z"/></svg>',
"tracksRemove" : '<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m571-80-43-43 114-113-114-113 43-43 113 114 113-114 43 43-114 113 114 113-43 43-113-114L571-80ZM120-330v-60h300v60H120Zm0-165v-60h470v60H120Zm0-165v-60h470v60H120Z"/></svg>',
"shuffle" : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M576-160v-60h120L522-393l42-43 176 174v-121h60v223H576Zm-374 0-42-43 538-537H576v-60h224v223h-60v-120L202-160Zm193-363L160-757l43-43 235 234-43 43Z"/></svg>',
"repeat" : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M280-80 120-240l160-160 42 44-86 86h464v-160h60v220H236l86 86-42 44Zm-80-450v-220h524l-86-86 42-44 160 160-160 160-42-44 86-86H260v160h-60Z"/></svg>',
"repeatOne" : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M460-360v-180h-60v-60h120v240h-60ZM280-80 120-240l160-160 56 58-62 62h406v-160h80v240H274l62 62-56 58Zm-80-440v-240h486l-62-62 56-58 160 160-160 160-56-58 62-62H280v160h-80Z"/></svg>',
"endless" : '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M220-260q-92 0-156-64T0-480q0-92 64-156t156-64q37 0 71 13t61 37l68 62-60 54-62-56q-16-14-36-22t-42-8q-58 0-99 41t-41 99q0 58 41 99t99 41q22 0 42-8t36-22l310-280q27-24 61-37t71-13q92 0 156 64t64 156q0 92-64 156t-156 64q-37 0-71-13t-61-37l-68-62 60-54 62 56q16 14 36 22t42 8q58 0 99-41t41-99q0-58-41-99t-99-41q-22 0-42 8t-36 22L352-310q-27 24-61 37t-71 13Z"/></svg>'
}

return icons[iconName];

}

/**
* Add methods for handling interaction with the audio player
*/
Expand All @@ -257,7 +259,7 @@ class EdiromAudioPlayer extends HTMLElement {
// get necessary objects and check if available
const audioPlayer = this.shadowRoot.querySelector('#audioPlayer');
const playerDiv = this.shadowRoot.querySelector('#player');
const playButton = this.shadowRoot.querySelector('#playButton');
const playButton = this.shadowRoot.querySelector('#play_arrowButton');
const source = this.shadowRoot.querySelector('source');
//if(audioPlayer === null || playerDiv === null || playButton === null || source === null )
// return;
Expand Down Expand Up @@ -297,11 +299,11 @@ class EdiromAudioPlayer extends HTMLElement {
if (audioPlayer != null && playButton != null) {
if (newPropertyValue === 'play' && audioPlayer != null && playButton != null) {
audioPlayer.play();
playButton.innerHTML = this.svg('pause');
playButton.innerHTML = '<span class="mso">pause</span>';
playButton.setAttribute('title', 'pause');
} else if(newPropertyValue === 'pause' && audioPlayer != null && playButton != null) {
(audioPlayer != null) ? audioPlayer.pause() : console.log("Audio player not available");
playButton.innerHTML = this.svg('play');
playButton.innerHTML = '<span class="mso">play_arrow</span>';
playButton.setAttribute('title', 'play');
} else {
console.log("Invalid audio player state property: '"+newPropertyValue+"'");
Expand Down Expand Up @@ -334,7 +336,7 @@ class EdiromAudioPlayer extends HTMLElement {

const tracksDiv = this.shadowRoot.querySelector('#tracks');
const sliderDiv = this.shadowRoot.querySelector('#timeInfo');
const tracksButton = this.shadowRoot.querySelector('#tracksRemoveButton');
const tracksButton = this.shadowRoot.querySelector('#playlist_removeButton');


switch(this.displaymode) {
Expand All @@ -344,18 +346,18 @@ class EdiromAudioPlayer extends HTMLElement {
case 'controls-sm':
tracksDiv.style.display = 'none';
sliderDiv.style.display = 'none';
tracksButton.innerHTML = this.svg('tracksAdd');
tracksButton.innerHTML = '<span class="mso">playlist_add</span>';

break;
case 'controls-md':
tracksDiv.style.display = 'none';
sliderDiv.style.display = 'block';
tracksButton.innerHTML = this.svg('tracksAdd');
tracksButton.innerHTML = '<span class="mso">playlist_add</span>';
break;
case 'controls-lg':
tracksDiv.style.display = 'block';
sliderDiv.style.display = 'block';
tracksButton.innerHTML = this.svg('tracksRemove');
tracksButton.innerHTML = '<span class="mso">playlist_remove</span>';
break;
case 'tracks-sm':

Expand Down Expand Up @@ -410,7 +412,7 @@ class EdiromAudioPlayer extends HTMLElement {


/** Event listener for play/pause button */
this.shadowRoot.querySelectorAll('#playButton').forEach(el => {
this.shadowRoot.querySelectorAll('#play_arrowButton').forEach(el => {
el.addEventListener('click', () => {
return audioPlayer.paused ? this.set('state', 'play') : this.set('state', 'pause');
});
Expand Down Expand Up @@ -491,7 +493,7 @@ class EdiromAudioPlayer extends HTMLElement {
break;
case 'repeat':
// go to next track and play from start to end
let nextButton = this.shadowRoot.querySelector('#nextButton');
let nextButton = this.shadowRoot.querySelector('#skip_nextButton');
nextButton.click();
break;
case 'repeatOne':
Expand Down Expand Up @@ -523,11 +525,11 @@ class EdiromAudioPlayer extends HTMLElement {
});
});

this.shadowRoot.querySelectorAll('#tracksRemoveButton').forEach(el => {
this.shadowRoot.querySelectorAll('#playlist_removeButton').forEach(el => {
el.addEventListener('click', (evt) => {
const tracksDiv = this.shadowRoot.querySelector('#tracks');
const tracksButton = this.shadowRoot.querySelector('#tracksRemoveButton');
tracksButton.innerHTML = tracksDiv.style.display === 'none' ? this.svg('tracksRemove') : this.svg('tracksAdd');
const tracksButton = this.shadowRoot.querySelector('#playlist_removeButton');
tracksButton.innerHTML = tracksDiv.style.display === 'none' ? '<span class="mso">playlist_remove</span>' : '<span class="mso">playlist_add</span>';
tracksDiv.style.display = tracksDiv.style.display === 'none' ? 'block' : 'none';
});
});
Expand Down

0 comments on commit 57e5106

Please sign in to comment.