src/javascript/blocks/video/modules/Video.js - Code Metrics - Inspection of "video block added" - Pixelneat/silverstripe-content-blocks - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 5543da...b12456 )

by Donata

created 2017-08-08 11:43 UTC

src/javascript/blocks/video/modules/Video.js A

↳ Parent: Project

Size

Lines of Code

126

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
dl	0
loc	126
rs	10
c	0
b	0
f	0
nc	1
noi	3

1 Function

Rating	Name	Duplication	Size	Complexity
A	Video.js ➔ ???	0	51	1

import {utils} from '../../../core/utils';
import videojs from 'video.js';

class Video {

    constructor(container) {
        this.container = container;

        this.player = null;

        this._layouts = {
            wrapper: 'data-wrapper',
            playButton: 'data-clicktoplay',
            container: 'data-container'
        };

        this._options = {
            autoPlay: false,
            controls: true,
            coverImage: false,
            type: 'file',
            embed: false,
            videoTypes: {
                mp4: false,
                webm: false,
                ogg: false
            },
        };

        this.init();

        this._playerOptions = {
            autoplay: this._options.autoPlay,
            controls: this._options.controls,
            sources: (() => {
                let sources = [];

                for (let format in this._options.videoTypes) {
                    let source = this._options.videoTypes[format];

                    if (source) {
                        sources.push({
                            src: source,
                            type: `video/${format}`
                        });
                    }
                }

                return sources;
            })(),
            poster: this._options.coverImage
        };

        this.bindEvents();
        this.simulateAutoPlay();
    }

    init() {
        if (this.container.hasAttribute('data-options')) {
            let options = JSON.parse(this.container.getAttribute('data-options'));

            if ('videoTypes' in options) {
                options.videoTypes = Object.assign(this._options.videoTypes, options.videoTypes);
            }

            this._options = Object.assign(this._options, options);
        }

        for (let key in this._layouts) {
            this._layouts[key] = this.container.querySelector(`*[${this._layouts[key]}]`);
        }
    }

    bindEvents() {
        this._layouts.playButton.addEventListener('click', (event) => this.onClickPlay(event));
    }

    simulateAutoPlay() {
        if (!this._options.autoPlay) return false;
if (a > 0)
    b = 42;

        this._layouts.playButton.click();

    }

    createIframeVideo() {
        let container = this._layouts.container;
        container.innerHTML = utils.render`
    <div class="video-block__container--embed">
        <iframe src="${this._options.embed}" width="100%" height="100%" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
`;
    }

    createVideoSource() {
        let container = this._layouts.container;

        container.innerHTML = utils.render`
    <video class="video-js">
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
`;
        this.player = videojs(container.querySelector('video'), this._playerOptions, () => {

        });
    }

    onClickPlay(event) {
        event.preventDefault();

        if (this.player != null) return false;
if (a > 0)
    b = 42;

        this._playerOptions.autoplay = true; // start play

        if (this._options.type == 'file') {
            this.createVideoSource();
        } else {
            this.createIframeVideo();
        }

        return false;
    }
}

export default Video;

1			import {utils} from '../../../core/utils';
2			import videojs from 'video.js';
3
4			class Video {
5
6			constructor(container) {
7			this.container = container;
8
9			this.player = null;
10
11			this._layouts = {
12			wrapper: 'data-wrapper',
13			playButton: 'data-clicktoplay',
14			container: 'data-container'
15			};
16
17			this._options = {
18			autoPlay: false,
19			controls: true,
20			coverImage: false,
21			type: 'file',
22			embed: false,
23			videoTypes: {
24			mp4: false,
25			webm: false,
26			ogg: false
27			},
28			};
29
30			this.init();
31
32			this._playerOptions = {
33			autoplay: this._options.autoPlay,
34			controls: this._options.controls,
35			sources: (() => {
36			let sources = [];
37
38			for (let format in this._options.videoTypes) {
39			let source = this._options.videoTypes[format];
40
41			if (source) {
42			sources.push({
43			src: source,
44			type: `video/${format}`
45			});
46			}
47			}
48
49			return sources;
50			})(),
51			poster: this._options.coverImage
52			};
53
54			this.bindEvents();
55			this.simulateAutoPlay();
56			}
57
58			init() {
59			if (this.container.hasAttribute('data-options')) {
60			let options = JSON.parse(this.container.getAttribute('data-options'));
61
62			if ('videoTypes' in options) {
63			options.videoTypes = Object.assign(this._options.videoTypes, options.videoTypes);
64			}
65
66			this._options = Object.assign(this._options, options);
67			}
68
69			for (let key in this._layouts) {
70			this._layouts[key] = this.container.querySelector(`*[${this._layouts[key]}]`);
71			}
72			}
73
74			bindEvents() {
75			this._layouts.playButton.addEventListener('click', (event) => this.onClickPlay(event));
76			}
77
78			simulateAutoPlay() {
79			if (!this._options.autoPlay) return false;
			0 ignored issues – show Coding Style Best Practice introduced 2017-08-08 11:45 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
80
81			this._layouts.playButton.click();
			0 ignored issues – show Best Practice introduced 2017-08-08 11:45 UTC by Report Bug Copy Issue Report There is no `return` statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding `return undefined;` explicitly. Loading history...
82			}
83
84			createIframeVideo() {
85			let container = this._layouts.container;
86			container.innerHTML = utils.render`
87			<div class="video-block__container--embed">
88			<iframe src="${this._options.embed}" width="100%" height="100%" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
89			</div>
90			`;
91			}
92
93			createVideoSource() {
94			let container = this._layouts.container;
95
96			container.innerHTML = utils.render`
97			<video class="video-js">
98			<p class="vjs-no-js">
99			To view this video please enable JavaScript, and consider upgrading to a web browser that
100			<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
101			</p>
102			</video>
103			`;
104			this.player = videojs(container.querySelector('video'), this._playerOptions, () => {
105
106			});
107			}
108
109			onClickPlay(event) {
110			event.preventDefault();
111
112			if (this.player != null) return false;
			0 ignored issues – show Coding Style Best Practice introduced 2017-08-08 11:45 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
113
114			this._playerOptions.autoplay = true; // start play
115
116			if (this._options.type == 'file') {
117			this.createVideoSource();
118			} else {
119			this.createIframeVideo();
120			}
121
122			return false;
123			}
124			}
125
126			export default Video;

Pixelneat / silverstripe-content-blocks

Push — master ( 5543da...b12456 )

src/javascript/blocks/video/modules/Video.js A

Size

Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like