Merge 3f0b86c into 021a17c

README.md

@@ -345,7 +345,12 @@ By default, if the URL contains a time then the media will seek to this point.
 
 Example: `example.com?t=100` would start the media at 100 seconds.
 
-You can disable this behavior setting this option with the value `false`.
+You can disable this behaviour setting this option with the value `false`.
+
+#### includeResetStyle
+> Default value: `true`
+
+By default, Clappr reset a bunch of styles that may impact your own style. With this option, it's possible to enable/disable  the use of [_resets.scss](https://github.com/clappr/clappr-core/blob/master/src/base/scss/_reset.scss).
 
 ### Playback Configuration
 Clappr has a specific set of options for playbacks. The configuration for the playback, it's still only compatible with `html5_video` playback (and derived playbacks).

rollup.config.js

@@ -24,7 +24,8 @@ const postcssOptions = {
     ['sass', {
       includePaths: ['src/base/scss']
     }]
-  ]
+  ],
+  inject: false,
 }
 const aliasPluginOptions = { entries: { 'clappr-zepto': 'node_modules/clappr-zepto/zepto.js', '@': __dirname + '/src' } }
 const replacePluginOptions = { VERSION: JSON.stringify(pkg.version) }

src/components/container/container.js

@@ -6,12 +6,13 @@
  * Container is responsible for the video rendering and state
  */
 
-import Events from '../../base/events'
-import UIObject from '../../base/ui_object'
-import ErrorMixin from '../../base/error_mixin'
-import { DoubleEventHandler } from '../../utils'
+import Events from '@/base/events'
+import UIObject from '@/base/ui_object'
+import ErrorMixin from '@/base/error_mixin'
+import Styler from '@/base/styler'
+import { DoubleEventHandler } from '@/utils'
 
-import './public/style.scss'
+import ContainerStyle from './public/style.scss'
 
 import $ from 'clappr-zepto'
 
@@ -516,6 +517,8 @@ export default class Container extends UIObject {
   }
 
   render() {
+    const style = Styler.getStyleFor(ContainerStyle.toString(), { baseUrl: this.options.baseUrl })
+    this.$el.append(style[0])
     this.$el.append(this.playback.render().el)
     this.updateStyle()
     this.checkResize()

src/components/core/core.js

@@ -2,19 +2,21 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { isNumber, Fullscreen, DomRecycler } from '../../utils'
+import { isNumber, Fullscreen, DomRecycler } from '@/utils'
 
-import Events from '../../base/events'
-import UIObject from '../../base/ui_object'
-import UICorePlugin from '../../base/ui_core_plugin'
-import Browser from '../../components/browser'
-import ContainerFactory from '../../components/container_factory'
-import PlayerError from '../../components/error'
-import ErrorMixin from '../../base/error_mixin'
+import Styler from '@/base/styler'
+import Events from '@/base/events'
+import UIObject from '@/base/ui_object'
+import UICorePlugin from '@/base/ui_core_plugin'
+import Browser from '@/components/browser'
+import ContainerFactory from '@/components/container_factory'
+import PlayerError from '@/components/error'
+import ErrorMixin from '@/base/error_mixin'
 
 import $ from 'clappr-zepto'
 
-import './public/style.scss'
+import CoreStyle from './public/style.scss'
+import ResetStyle from './public/optional_reset.scss'
 
 /**
  * The Core is responsible to manage Containers and the player state.
@@ -358,7 +360,12 @@ export default class Core extends UIObject {
   }
 
   appendToParent() {
-    let hasCoreParent = this.$el.parent() && this.$el.parent().length
+    const style = Styler.getStyleFor(CoreStyle.toString(), { baseUrl: this.options.baseUrl })
+    const resetStyle = Styler.getStyleFor(ResetStyle.toString(), { baseUrl: this.options.baseUrl })
+    this.$el.append(style[0])
+    this.options.includeResetStyle && this.$el.append(resetStyle[0])
+
+    const hasCoreParent = this.$el.parent() && this.$el.parent().length
     !hasCoreParent && this.$el.appendTo(this.options.parentElement)
   }
 

src/components/core/public/optional_reset.scss

@@ -0,0 +1,5 @@
+@import 'reset';
+
+[data-player] {
+  @include nested-reset;
+}

src/components/core/public/style.scss

@@ -1,9 +1,7 @@
-@import 'reset';
 @import 'noselect';
 @import 'fontsmoothing';
 
 [data-player] {
-  @include nested-reset;
   @include no-select;
   @include font-smoothing;
   transform: translate3d(0,0,0);

src/components/player/player.js

@@ -236,6 +236,7 @@ export default class Player extends BaseObject {
       height: 360,
       baseUrl: baseUrl,
       allowUserInteraction: Browser.isMobile,
+      includeResetStyle: true,
       playback: playbackDefaultOptions
     }
     this._options = $.extend(defaultOptions, options)

src/playbacks/html5_video/html5_video.js

@@ -4,15 +4,16 @@
 
 import { isNumber, seekStringToSeconds, DomRecycler, canAutoPlayMedia } from '../../utils'
 
-import Events from '../../base/events'
-import Playback from '../../base/playback'
-import Browser from '../../components/browser'
-import Log from '../../components/log'
-import PlayerError from '../../components/error'
+import Events from '@/base/events'
+import Playback from '@/base/playback'
+import Browser from '@/components/browser'
+import Log from '@/components/log'
+import PlayerError from '@/components/error'
 import $ from 'clappr-zepto'
-import template from '../../base/template'
+import template from '@/base/template'
 import tracksHTML from './public/tracks.html'
-import './public/style.scss'
+import Styler from '@/base/styler'
+import HTML5VideoStyle from './public/style.scss'
 
 const MIMETYPES = {
   'mp4': ['avc1.42E01E', 'avc1.58A01E', 'avc1.4D401E', 'avc1.64001E', 'mp4v.20.8', 'mp4v.20.240', 'mp4a.40.2'].map(
@@ -663,6 +664,8 @@ export default class HTML5Video extends Playback {
     }
 
     this._ready()
+    const style = Styler.getStyleFor(HTML5VideoStyle.toString(), { baseUrl: this.options.baseUrl })
+    this.$el.append(style[0])
     return this
   }
 }

src/playbacks/html_img/html_img.js

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Playback from '../../base/playback'
-import Events from '../../base/events'
-import './public/style.scss'
+import Playback from '@/base/playback'
+import Events from '@/base/events'
+import Styler from '@/base/styler'
+import HTMLImgStyle from './public/style.scss'
 
 export default class HTMLImg extends Playback {
   get name() { return 'html_img' }
@@ -34,6 +35,8 @@ export default class HTMLImg extends Playback {
   }
 
   render() {
+    const style = Styler.getStyleFor(HTMLImgStyle.toString(), { baseUrl: this.options.baseUrl })
+    this.$el.append(style[0])
     this.trigger(Events.PLAYBACK_READY, this.name)
     return this
   }

src/playbacks/no_op/no_op.js

@@ -1,9 +1,10 @@
-import { requestAnimationFrame, cancelAnimationFrame } from '../../utils'
-import Playback from '../../base/playback'
-import template from '../../base/template'
-import Events from '../../base/events'
+import { requestAnimationFrame, cancelAnimationFrame } from '@/utils'
+import Styler from '@/base/styler'
+import Playback from '@/base/playback'
+import template from '@/base/template'
+import Events from '@/base/events'
 import noOpHTML from './public/error.html'
-import './public/style.scss'
+import noOpStyle from  './public/style.scss'
 
 export default class NoOp extends Playback {
   get name() { return 'no_op' }
@@ -20,6 +21,8 @@ export default class NoOp extends Playback {
 
   render() {
     const playbackNotSupported = this.options.playbackNotSupportedMessage || this.i18n.t('playback_not_supported')
+    const style = Styler.getStyleFor(noOpStyle.toString(), { baseUrl: this.options.baseUrl })
+    this.$el.append(style[0])
     this.$el.html(this.template({ message: playbackNotSupported }))
     this.trigger(Events.PLAYBACK_READY, this.name)
     const showForNoOp = !!(this.options.poster && this.options.poster.showForNoOp)