Skip to content

Commit

Permalink
Merge pull request #2 from markusguenther/feature/introduce-audio
Browse files Browse the repository at this point in the history
Feature: introduce audio
  • Loading branch information
jonnitto authored Oct 17, 2019
2 parents 8065237 + 0b6d311 commit 63d3d50
Show file tree
Hide file tree
Showing 12 changed files with 118 additions and 65 deletions.
12 changes: 8 additions & 4 deletions Configuration/NodeTypes.Mixin.Groups.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,22 @@
inspector:
groups:
video:
label: Video
label: i18n
icon: 'fas fa-file-video'
position: 10
vimeo:
label: Vimeo
label: i18n
icon: 'fab fa-vimeo-v'
position: 11
youtube:
label: YouTube
label: i18n
icon: 'fab fa-youtube'
position: 12
audio:
label: i18n
icon: 'fas fa-file-audio'
position: 20
look:
label: i18n
icon: 'fas fa-paint-brush'
position: 20
position: 30
9 changes: 9 additions & 0 deletions Resources/Private/Assets/Audio/Embed.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { init } from '../Helper/MediaInit';
import addEvent from '../Helper/addEvent';

const elements = document.querySelectorAll(
'.jonnitto-prettyembed--audio audio'
);
Array.from(elements).forEach(element => {
init(element, false);
});
1 change: 1 addition & 0 deletions Resources/Private/Assets/Audio/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './Embed';
63 changes: 63 additions & 0 deletions Resources/Private/Assets/Helper/MediaInit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
const BASE = 'jonnitto-prettyembed';
const INIT_CLASS = `${BASE}--init`;
const SLIM_CLASS = `${BASE}--slim`;
const PLAY_CLASS = `${BASE}--play`;

const VIDEOS = Array.from(
document.querySelectorAll(`.${BASE}--video video:not([autoplay])`)
);
const AUDIOS = Array.from(
document.querySelectorAll(`.${BASE}--audio audio:not([autoplay])`)
);
const ELEMENTS = [].concat(VIDEOS, AUDIOS);

function init(element, autoplay = true) {
const CLASS_LIST = element.parentNode.classList;
if (CLASS_LIST.contains(INIT_CLASS)) {
return;
}

if (element.hasAttribute('data-controls')) {
element.setAttribute('controls', true);
}

if (!element.hasAttribute('controls')) {
CLASS_LIST.add(SLIM_CLASS);
element.addEventListener('click', () => {
const play = !CLASS_LIST.contains(PLAY_CLASS);
CLASS_LIST[play ? 'add' : 'remove'](PLAY_CLASS);
if (play) {
element.play();
} else {
element.pause();
}
});
}

CLASS_LIST.add(INIT_CLASS);
if (autoplay) {
CLASS_LIST.add(PLAY_CLASS);
setTimeout(() => {
element.play();
}, 0);
}
}

function pause(elements = ELEMENTS, current = null) {
elements.forEach(element => {
if (element != current) {
if (!element.hasAttribute('controls')) {
element.parentNode.classList.remove(PLAY_CLASS);
}
element.pause();
}
});
}

ELEMENTS.forEach(element => {
element.addEventListener('play', event => {
pause(ELEMENTS, event.target);
});
});

export { init, pause };
1 change: 1 addition & 0 deletions Resources/Private/Assets/Main.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './Audio';
import './Video';
import './Vimeo';
import './Youtube';
2 changes: 1 addition & 1 deletion Resources/Private/Assets/Video/Embed.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { init } from './Init';
import { init } from '../Helper/MediaInit';
import addEvent from '../Helper/addEvent';

const SELECTOR =
Expand Down
57 changes: 0 additions & 57 deletions Resources/Private/Assets/Video/Init.js

This file was deleted.

2 changes: 1 addition & 1 deletion Resources/Private/Assets/Video/Lightbox.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as video from './Init';
import * as video from '../Helper/MediaInit';
import * as lightbox from '../Helper/Lightbox';

const BASE_CLASS = 'jonnitto-prettyembed';
Expand Down
16 changes: 16 additions & 0 deletions Resources/Private/Translations/de/NodeTypes/Mixin/Groups.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
<source>Videos</source>
<target>Videos</target>
</trans-unit>
<trans-unit id="groups.video" xml:space="preserve">
<source>Video</source>
<target>Video</target>
</trans-unit>
<trans-unit id="groups.vimeo" xml:space="preserve">
<source>Vimeo</source>
<target>Vimeo</target>
</trans-unit>
<trans-unit id="groups.youtube" xml:space="preserve">
<source>YouTube</source>
<target>YouTube</target>
</trans-unit>
<trans-unit id="groups.audio" xml:space="preserve">
<source>Audio</source>
<target>Audio</target>
</trans-unit>
<trans-unit id="groups.look" xml:space="preserve">
<source><![CDATA[Look & Feel]]></source>
<target><![CDATA[Look & Feel]]></target>
Expand Down
16 changes: 16 additions & 0 deletions Resources/Private/Translations/en/NodeTypes/Mixin/Groups.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
<source>Videos</source>
<target>Videos</target>
</trans-unit>
<trans-unit id="groups.video" xml:space="preserve">
<source>Video</source>
<target>Video</target>
</trans-unit>
<trans-unit id="groups.vimeo" xml:space="preserve">
<source>Vimeo</source>
<target>Vimeo</target>
</trans-unit>
<trans-unit id="groups.youtube" xml:space="preserve">
<source>YouTube</source>
<target>YouTube</target>
</trans-unit>
<trans-unit id="groups.audio" xml:space="preserve">
<source>Audio</source>
<target>Audio</target>
</trans-unit>
<trans-unit id="groups.look" xml:space="preserve">
<source><![CDATA[Look & Feel]]></source>
<target><![CDATA[Look & Feel]]></target>
Expand Down
2 changes: 1 addition & 1 deletion Resources/Public/Scripts/Main.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Resources/Public/Scripts/Main.js.map

Large diffs are not rendered by default.

0 comments on commit 63d3d50

Please sign in to comment.