8000 Core - Make reset CSS configurable by joaopaulovieira · Pull Request #44 · clappr/clappr-core · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Core - Make reset CSS configurable #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 25, 2020
Merged

Core - Make reset CSS configurable #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
eb0c571
build(rollup): stop style injection on the page header
joaopaulovieira Nov 9, 2020
2bbebb9
refactor: inject style on the element itself
joaopaulovieira Nov 9, 2020
56d4d96
refactor: use src path alias intead relative path
joaopaulovieira Nov 9, 2020
cf6740b
style(core): move reset style to one specific file
joaopaulovieira Nov 9, 2020
e260b43
refactor(core): make style reset configurable
joaopaulovieira Nov 10, 2020
460e1dc
refactor(player): set default value for resetStyle option
joaopaulovieira Nov 10, 2020
f4ebfc5
refactor: update resetStyle option name to includeResetStyle
joaopaulovieira Nov 25, 2020
dde0b5f
docs(README): fix typo behavior
joaopaulovieira Nov 25, 2020
2a6b9b7
docs(README): add includeResetStyle option documentation
joaopaulovieira Nov 25, 2020
3f0b86c
refactor(core): rename reset style
jhonatangcavalcanti Nov 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
3 changes: 2 additions & 1 deletion rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
Expand Down
13 changes: 8 additions & 5 deletions src/components/container/container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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()
Expand Down
27 changes: 17 additions & 10 deletions src/components/core/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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)
}

Expand Down
5 changes: 5 additions & 0 deletions src/components/core/public/optional_reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import 'reset';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer double-quoted strings


[data-player] {
@include nested-reset;
}
2 changes: 0 additions & 2 deletions src/components/core/public/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/components/player/player.js
< 9E19 details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default position-absolute f5" style="width:max-content; min-width:185px; z-index:99; right: -4px;">
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
17 changes: 10 additions & 7 deletions src/playbacks/html5_video/html5_video.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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
}
}
Expand Down
9 changes: 6 additions & 3 deletions src/playbacks/html_img/html_img.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
Expand Down Expand Up @@ -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
}
Expand Down
13 changes: 8 additions & 5 deletions src/playbacks/no_op/no_op.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' }
Expand All @@ -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)
Expand Down
0