refactor: prefer object deep merge with $.extend

src/base/playback/playback.js

@@ -224,7 +224,7 @@ export default class Playback extends UIObject {
    * @param {Object} options all the options to change in form of a javascript object
    */
   configure(options) {
-    this._options = $.extend(this._options, options)
+    this._options = $.extend(true, this._options, options)
   }
 
   /**

src/base/ui_object/ui_object.js

@@ -190,7 +190,7 @@ export default class UIObject extends BaseObject {
    */
   _ensureElement() {
     if (!this.el) {
-      const attrs = $.extend({}, this.attributes)
+      const attrs = $.extend(true, {}, this.attributes)
       if (this.id) attrs.id = this.id
       if (this.className) attrs['class'] = this.className
       const $el = $(DomRecycler.create(this.tagName)).attr(attrs)

src/components/container/container.js

@@ -121,7 +121,7 @@ export default class Container extends UIObject {
     this.volume = 100
     this.playback = options.playback
     this.playerError = playerError
-    this.settings = $.extend({}, this.playback.settings)
+    this.settings = $.extend(true, {}, this.playback.settings)
     this.isReady = false
     this.mediaControlDisabled = false
     this.plugins = [this.playback]
@@ -509,7 +509,7 @@ export default class Container extends UIObject {
    * @param {Object} options all the options to change in form of a javascript object
    */
   configure(options) {
-    this._options = $.extend(this._options, options)
+    this._options = $.extend(true, this._options, options)
     this.updateStyle()
     this.playback.configure(this.options)
     this.trigger(Events.CONTAINER_OPTIONS_CHANGE)

src/components/core/core.js

@@ -218,7 +218,7 @@ export default class Core extends UIObject {
     sources = sources && sources.constructor === Array ? sources : [sources]
     this.options.sources = sources
     this.containers.forEach((container) => container.destroy())
-    this.containerFactory.options = $.extend(this.options, { sources })
+    this.containerFactory.options = $.extend(true, this.options, { sources })
     this.prepareContainers()
   }
 
@@ -347,7 +347,7 @@ export default class Core extends UIObject {
    * @param {Object} options all the options to change in form of a javascript object
    */
   configure(options) {
-    this._options = $.extend(this._options, options)
+    this._options = $.extend(true, this._options, options)
     this.configureDomRecycler()
 
     const sources = options.source || options.sources

src/components/player/player.js

@@ -238,7 +238,7 @@ export default class Player extends BaseObject {
       allowUserInteraction: Browser.isMobile,
       playback: playbackDefaultOptions
     }
-    this._options = $.extend(defaultOptions, options)
+    this._options = $.extend(true, defaultOptions, options)
     this.options.sources = this._normalizeSources(options)
     if (!this.options.chromeless) {
       // "allowUserInteraction" cannot be false if not in chromeless mode.

src/playbacks/html5_video/html5_video.js

@@ -138,7 +138,7 @@ export default class HTML5Video extends Playback {
 
     }
 
-    $.extend(this.el, {
+    $.extend(true, this.el, {
       muted: this.options.mute,
       defaultMuted: this.options.mute,
       loop: this.options.loop,

src/utils/utils.js

@@ -289,7 +289,7 @@ export function canAutoPlayMedia(cb, options) {
 // Simple element factory with video recycle feature.
 export class DomRecycler {
   static configure(options) {
-    this.options = $.extend(this.options, options)
+    this.options = $.extend(true, this.options, options)
   }
 
   static create(name) {