# Components and player's states

CSS properties of components change depending on the states of the player. For example, the opacity or display property of some components change when the player is hovered over. [States of the player](/docs/wowza-flowplayer/player/skinning) are reflected on the `classlist`
property of the player’s parent element. If you want to replace a Wowza Flowplayer component with your own, but, at the same time you want to keep the default styling behavior when the player changes state, you should add the default `classlist` of the component you want to replace, then override the properties you're not interested in.

## Notes on components

### Icon components

Wowza Flowplayer icon components are `HTMLDivElement` with icons used as background-images. The URL’s of these images are variables that you can easily [override with your own](/docs/wowza-flowplayer/player/skinning) instead of defining your
own icon-component. Also, Icon components click listeners are added inside their parents constructors if they are core components, or, inside a plugin, if they are plugin components. The only exceptions to this rule are `flowplayer-airplay-icon` and ` flowplayer-chromecast-icon`. Therefore, creating a flowplayer icon component means you have to handle click events on them using one of the [player methods](/docs/wowza-flowplayer/player/player-api#methods)
or [playlist api](/docs/wowza-flowplayer/plugins/playlist/#manage-the-plugin) for `flowplayer-skip-previous-icon` and `flowplayer-skip-next-icon`.

### Timeline component

If you define your own timeline component, for better UI performance of other components, please make sure to update the state of the player when these events are triggered on timeline
player.setState(flowplayer.events.SEEKING, true).

* `mousemove`, `touchstart`

```javascript
 player.setState(flowplayer.events.SEEKING, true)
```
* `mouseup`, `touchend`

```javascript
 player.setState(flowplayer.events.SEEKING, false)
```


Info
Livestreams sometimes trigger the seeking event on the player without interaction with the timeline.
It may be useful to listen to `flowplayer.events.DVR` and `flowplayer.events.LIVE` to adjust your timeline
accordingly.

### Menu components

All Wowza Flowplayer menu components have the same structure. They consist of an `HTMLDetailsElement` and a menu inside it. The `classlist` property of the menu is `fp-menu`. If your intention is to use the default Flowplayer
menus, but place them somewhere different than their normal position, you may have to override some of the class properties. If you want to create your own menu component, this class could also be helpful to use, as it makes menus
fullscreen when the size of a device is small, with the necessary adjustments.