-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
25 changed files
with
603 additions
and
947 deletions.
There are no files selected for viewing
69 changes: 69 additions & 0 deletions
69
libraries/common/collections/media-providers/MediaProvider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import { logger } from '@shopgate/pwa-core/helpers'; | ||
import styles from './style'; | ||
|
||
/** | ||
* The MediaProvider base class. | ||
*/ | ||
class MediaProvider { | ||
/** | ||
* Constructor. | ||
*/ | ||
constructor() { | ||
this.containers = new Map(); | ||
} | ||
|
||
/** | ||
* Optimizes video container to make it responsive. | ||
* @param {NodeList} container A DOM container. | ||
* @private | ||
* @returns {MediaProvider} | ||
*/ | ||
responsify(container) { | ||
// Remove fixed dimensions from the container. | ||
container.removeAttribute('height'); | ||
container.removeAttribute('width'); | ||
|
||
// Create the wrapper and apply styling. | ||
const wrapper = document.createElement('div'); | ||
|
||
wrapper.className = styles; | ||
|
||
// Add the wrapper right before the container into the DOM. | ||
container.parentNode.insertBefore(wrapper, container); | ||
// Move the container into the wrapper. | ||
wrapper.appendChild(container); | ||
|
||
return this; | ||
} | ||
|
||
/** | ||
* Add a DOM container with embedded videos. | ||
* @param {NodeList} container A DOM container. | ||
* @returns {MediaProvider} | ||
*/ | ||
add() { | ||
logger.error('MediaProvider.add() needs to be implemented within an inheriting class'); | ||
return this; | ||
} | ||
|
||
/** | ||
* Remove a DOM container. | ||
* @param {NodeList} container A DOM container. | ||
* @returns {MediaProvider} | ||
*/ | ||
remove(container) { | ||
this.containers.delete(container); | ||
return this; | ||
} | ||
|
||
/** | ||
* Stops all playing videos within the DOM containers. | ||
* @returns {MediaProvider} | ||
*/ | ||
stop() { | ||
logger.error('MediaProvider.stop() needs to be implemented within an inheriting class'); | ||
return this; | ||
} | ||
} | ||
|
||
export default MediaProvider; |
87 changes: 87 additions & 0 deletions
87
libraries/common/collections/media-providers/MediaProvider.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import { JSDOM } from 'jsdom'; | ||
import { logger } from '@shopgate/pwa-core/helpers'; | ||
import MediaProvider from './MediaProvider'; | ||
import styles from './style'; | ||
|
||
jest.mock('@shopgate/pwa-core/helpers', () => ({ | ||
logger: { | ||
error: jest.fn(), | ||
}, | ||
})); | ||
|
||
/** | ||
* Creates a DOM container with iframes. | ||
* @param {Array} srcs A list of video URLs. | ||
* @return {Object} | ||
*/ | ||
const createContainer = (srcs) => { | ||
const html = srcs.map(src => `<iframe src="${src}"></iframe>`).join(''); | ||
return new JSDOM(html).window.document; | ||
}; | ||
|
||
describe('MediaProvider', () => { | ||
beforeEach(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
describe('.constructor()', () => { | ||
it('should construct as expected', () => { | ||
const instance = new MediaProvider(); | ||
expect(instance.containers).toBeInstanceOf(Map); | ||
expect(Array.from(instance.containers)).toHaveLength(0); | ||
}); | ||
}); | ||
|
||
describe('.add()', () => { | ||
it('should log an error when it is not overwritten', () => { | ||
const instance = new MediaProvider(); | ||
instance.add(); | ||
expect(logger.error).toHaveBeenCalledTimes(1); | ||
}); | ||
}); | ||
|
||
describe('.stop()', () => { | ||
it('should log an error when it is not overwritten', () => { | ||
const instance = new MediaProvider(); | ||
instance.stop(); | ||
expect(logger.error).toHaveBeenCalledTimes(1); | ||
}); | ||
}); | ||
|
||
describe('.remove()', () => { | ||
it('should remove containers as expected', () => { | ||
const instance = new MediaProvider(); | ||
const containerOne = createContainer(['http://www.provider-one.com/video']); | ||
const containerTwo = createContainer(['http://www.provider-two.com/video']); | ||
|
||
instance.containers.set(containerOne, containerOne); | ||
instance.containers.set(containerTwo, containerTwo); | ||
|
||
instance.remove(containerTwo); | ||
|
||
expect(instance.containers.size).toBe(1); | ||
expect(instance.containers.get(containerTwo)).toBeUndefined(); | ||
expect(instance.containers.get(containerOne)).toEqual(containerOne); | ||
|
||
instance.remove(containerOne); | ||
|
||
expect(instance.containers.size).toBe(0); | ||
}); | ||
}); | ||
|
||
describe('.responsify()', () => { | ||
it('should responsify a dom container', () => { | ||
const dom = document.createElement('body'); | ||
dom.innerHTML = '<iframe width="560" height="315" />'; | ||
const container = dom.querySelectorAll('iframe')[0]; | ||
|
||
const instance = new MediaProvider(); | ||
instance.responsify(container); | ||
|
||
expect(dom).toMatchSnapshot(); | ||
expect(container.getAttribute('height')).toBeNull(); | ||
expect(container.getAttribute('width')).toBeNull(); | ||
expect(container.closest('div').className).toBe(styles); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.