# Migration guide for 2.0.0 version.

We just released 2.0.0 version! Our main goal was to standardize naming in internal functionality, API methods and reduce configuration object for player constructor. Here is list of all breaking changes:

## Player config

We have new structure of [config object](/player-config).

```typescript
interface IPlayerConfig {
  src?: PlayableMediaSource;
  poster?: string;
  title?: string;

  width?: number;
  height?: number;
  fillAllSpace?: boolean;

  preload?: PreloadTypes;
  autoplay?: boolean;
  loop?: boolean;
  muted?: boolean;
  volume?: number;
  playsinline?: boolean;
  crossOrigin?: CrossOriginValue;
  nativeBrowserControls?: boolean;

  disableControlWithClickOnPlayer?: boolean;
  disableControlWithKeyboard?: boolean;

  hideMainUI?: boolean;
  hideOverlay?: boolean;

  disableFullScreen?: boolean;

  texts?: ITextMapConfig;
}
```

And changes we made:

- `size` object removed, now just pass `width` and `height`.

```javascript
//Before
const config = {
  size: {
    width: 400,
    height: 200,
  },
};

//After
const config = {
  width: 400,
  height: 200,
};
```

- `showInteractionIndicator` property removed.

```javascript
//Before
const config = {
  showInteractionIndicator: false,
};

//After
const config = {};
```

- `screen` object removed.

```javascript
//Before
const config = {
  screen: {
    nativeControls: true,
    disableClickProcessing: true,
  },
};

//After
const config = {
  nativeBrowserControls: true,
  disableControlWithClickOnPlayer: true,
};
```

- `title` object removed.

```javascript
//Before
const config = {
  title: {
    text: 'Title',
    callback: () => console.log('Title click'),
  },
};

//After
const config = {
  title: 'Text',
};
const player = Playable.create(config);
player.setTitleClickCallback(() => console.log('Title click'));
```

- `controls` object removed.

```javascript
//Before
const config = {
  controls: {
    setShouldAlwaysShow: true,
  },
};

//After
const player = Playable.create();
player.setMainUIShouldAlwaysShow(true);
```

- `overlay` object removed.

```javascript
//Before
const config = {
  overlay: false,
};

//After
const config = {
  hideOverlay: true,
};

// -------

//Before
const config = {
  overlay: {
    poster: 'IMAGE_URL',
  },
};

//After
const config = {
  poster: 'IMAGE_URL',
};
```

- `fullScreen` object removed.

```javascript
//Before
const config = {
  fullScreen: false,
};

//After
const config = {
  disableFullScreen: true,
};
```

- `logo` object removed.

```javascript
//Before
const config = {
  logo: {
    src: 'LOGO_URL',
    shouldAlwaysShow: true,
    callback: () => console.log('Logo click'),
  },
};

//After
const player = Playable.create();
player.setLogo('LOGO_URL');
player.setAlwaysShowLogo(true);
player.setLogoClickCallback(() => console.log('Logo clicl'));
```

- `loader` property removed.

```javascript
//Before
const config = {
  loader: false,
};

//After
const config = {};
```

- `autoPlay` -> `autoplay`.

```javascript
//Before
const config = {
  autoPlay: true,
};

//After
const config = {
  autoplay: true,
};
```

- `playInline` -> `playsinline`.

```javascript
//Before
const config = {
  playInline: true,
};

//After
const config = {
  playsinline: true,
};
```

New properties:

- `hideMainUI` for hidding all UI except overlay.
- `hideOverlay` for hidding overlay.

## Player API

We focused almost only on renaming for consistency.

Just renaming:

- getter `isVideoPaused` -> getter `isPaused`.

```javascript
//Before
console.log(player.isVideoPaused);

//After
console.log(player.isPaused);
```

- getter `isVideoEnded` -> getter `isEnded`.

```javascript
//Before
console.log(player.isVideoEnded);

//After
console.log(player.isEnded);
```

- `goForward()` -> `seekForward()`.

```javascript
//Before
player.goForward(10);

//After
player.seekForward(10);
```

- `goBackward()` -> `seekBackward()`.

```javascript
//Before
player.goBackward(10);

//After
player.seekBackward(10);
```

- `goTo()` -> `seekTo()`.

```javascript
//Before
player.goTo(50);

//After
player.seekTo(50);
```

- `getDurationTime()` -> `getDuration()`.

```javascript
//Before
console.log(player.getDurationTime());

//After
console.log(player.getDuration());
```

- `setAutoPlay()` -> `setAutoplay()`.

```javascript
//Before
player.setAutoPlay(true);

//After
player.setAutoplay(true);
```

- `getAutoPlay()` -> `getAutoplay()`.

```javascript
//Before
console.log(player.getAutoPlay());

//After
console.log(player.getAutoplay());
```

- `setPlayInline()` -> `setPlaysinline()`.

```javascript
//Before
player.setPlayInline(true);

//After
player.setPlaysinline(true);
```

- `getPlayInline()` -> `getPlaysinline()`.

```javascript
//Before
console.log(player.getPlayInline());

//After
console.log(player.getPlaysinline());
```

- `getCurrentPlaybackState()` -> `getPlaybackState()`.

```javascript
//Before
console.log(player.getCurrentPlaybackState());

//After
console.log(player.getPlaybackState());
```

- `setControlsShouldAlwaysShow()` -> `setMainUIShouldAlwaysShow()`.

```javascript
//Before
player.setControlsShouldAlwaysShow(true);

//After
player.setMainUIShouldAlwaysShow(true);
```

- `setLogoAlwaysShowFlag()` -> `setAlwaysShowLogo()`.

```javascript
//Before
player.setLogoAlwaysShowFlag(true);

//After
player.setAlwaysShowLogo(true);
```

Changed usage:

- getter `node` -> `getElement()`.

```javascript
//Before
console.log(player.node); //DOM Element

//After
console.log(player.getElement()); //DOM Element
```

- `setMute()` removed, added `mute()` and `unmute()`.

```javascript
//Before
player.setMute(true);
player.setMute(false);

//After
player.mute();
player.unmute();
```

- `getMuted()` -> getter `isMuted`.

```javascript
//Before
player.setMute(true);
console.log(player.getMuted()); //true

//After
player.mute();
console.log(player.isMuted); //true
```

## Events

### Video events

Just renaming:

- `VOLUME_STATUS_CHANGED` -> `SOUND_STATE_CHANGED`.
- `PLAY_REQUEST_TRIGGERED` -> `PLAY_REQUEST`.

### UI events

Just renaming:

- `PLAY_TRIGGERED` -> `PLAY_CLICK`.
- `PLAY_OVERLAY_TRIGGERED` -> `PLAY_OVERLAY_CLICK`.
- `PAUSE_TRIGGERED` -> `PAUSE_CLICK`.
- `PROGRESS_CHANGE_TRIGGERED` -> `PROGRESS_CHANGE`.
- `PROGRESS_SYNC_BUTTON_MOUSE_ENTER_TRIGGERED` -> `PROGRESS_SYNC_BUTTON_MOUSE_ENTER`.
- `PROGRESS_SYNC_BUTTON_MOUSE_LEAVE_TRIGGERED` -> `PROGRESS_SYNC_BUTTON_MOUSE_LEAVE`.
- `VOLUME_CHANGE_TRIGGERED` -> `VOLUME_CHANGE`.
- `FULLSCREEN_STATUS_CHANGED` -> `FULL_SCREEN_STATE_CHANGED`. Also added `ENTER_FULL_SCREEN_CLICK` and `EXIT_FULL_SCREEN_CLICK` for clicks on full screen control.
- `MOUSE_ENTER_ON_PLAYER_TRIGGERED` -> `MOUSE_ENTER_ON_PLAYER`.
- `MOUSE_MOVE_ON_PLAYER_TRIGGERED` -> `MOUSE_MOVE_ON_PLAYER`.
- `MOUSE_LEAVE_ON_PLAYER_TRIGGERED` -> `MOUSE_LEAVE_ON_PLAYER`.
- `MAIN_BLOCK_HIDE_TRIGGERED` -> `MAIN_BLOCK_HIDE`.
- `MAIN_BLOCK_SHOW_TRIGGERED` -> `MAIN_BLOCK_SHOW`.
- `PROGRESS_MANIPULATION_STARTED` -> `PROGRESS_DRAG_STARTED`.
- `PROGRESS_MANIPULATION_ENDED` -> `PROGRESS_DRAG_ENDED`.
- `LOADER_SHOW_TRIGGERED` -> `LOADER_SHOW`.
- `LOADER_HIDE_TRIGGERED` -> `LOADER_HIDE`.
- `LOADING_COVER_SHOW_TRIGGERED` -> `LOADING_COVER_SHOW`.
- `LOADING_COVER_HIDE_TRIGGERED` -> `LOADING_COVER_HIDE`.
- `TOGGLE_PLAYBACK_WITH_KEYBOARD_TRIGGERED` -> `TOGGLE_PLAYBACK_WITH_KEYBOARD`.
- `GO_BACKWARD_WITH_KEYBOARD_TRIGGERED` -> `GO_BACKWARD_WITH_KEYBOARD`.
- `GO_FORWARD_WITH_KEYBOARD_TRIGGERED` -> `GO_FORWARD_WITH_KEYBOARD`.
- `INCREASE_VOLUME_WITH_KEYBOARD_TRIGGERED` -> `INCREASE_VOLUME_WITH_KEYBOARD`.
- `DECREASE_VOLUME_WITH_KEYBOARD_TRIGGERED` -> `DECREASE_VOLUME_WITH_KEYBOARD`.
- `MUTE_SOUND_WITH_KEYBOARD_TRIGGERED` -> `MUTE_SOUND_WITH_KEYBOARD`.
- `UNMUTE_SOUND_WITH_KEYBOARD_TRIGGERED` -> `UNMUTE_SOUND_WITH_KEYBOARD`.
- `HIDE_INTERACTION_INDICATOR_TRIGGERED` -> `HIDE_INTERACTION_INDICATOR`.
- `PLAY_WITH_SCREEN_CLICK_TRIGGERED` -> `PLAY_WITH_SCREEN_CLICK`.
- `PAUSE_WITH_SCREEN_CLICK_TRIGGERED` -> `PAUSE_WITH_SCREEN_CLICK`.

Removed events:

- `PLAYER_WIDTH_CHANGE_TRIGGERED` and `PLAYER_HEIGHT_CHANGE_TRIGGERED` removed. Use `RESIZE`.
- `MUTE_STATUS_TRIGGERED` removed, now use `MUTE_CLICK` and `UNMUTE_CLICK`.
- `CONTROL_BLOCK_HIDE_TRIGGERED` and `CONTROL_BLOCK_SHOW_TRIGGERED` removed. Use `MAIN_BLOCK_HIDE` and `MAIN_BLOCK_SHOW`.

## Data attributes

We changes all names of all internal data attributes. We just added prefix `playable` after `data`, so there would be no potential conflicts with other libraries (lol yes, ofc).

- `data-focus-source` -> `data-playable-focus-source`.
- `data-hook` -> `data-playable-hook` (values we left same).
- `data-in-full-screen` -> `data-playable-in-full-screen`.
- `data-is-playing` -> `data-playable-is-playing`.
- `data-played-percent` -> `data-playable-played-percent`.
- `data-is-muted` -> `data-playable-is-muted`.
- `data-volume-percent` -> `data-playable-volume-percent`

New prefix for element queries functionality!
`data` -> `data-playable` (for example instead of `data-max-width` use now `data-playable-max-width`).

New data attributes:

- `data-playable-duration` - we set here duration of video.
- `data-playable-current-time` - we set here current time of video.

## Internal modules API

Main changes - we renamed in all our modules `getNode()` -> `getElement()`.