Skip to content

Commit 5eb9b77

Browse files
jboixjboix
committed
chore: migrate sass and update vite
- Migrated Sass from `@import` to `@use/@forward` syntax to prepare for Dart Sass 3.0 using the [`sass-migrator`](https://sass-lang.com/documentation/cli/migrator/) - Upgraded Vite to latest v7+ version to support updated build tools and syntax. - Updated all related stylelint dependencies.
1 parent 209577d commit 5eb9b77

19 files changed

+876
-725
lines changed

‎package-lock.json‎

Lines changed: 442 additions & 341 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,14 +84,14 @@
8484
"jsdoc": "^4.0.2",
8585
"jsdoc-tsimport-plugin": "^1.0.5",
8686
"rimraf": "^5.0.5",
87-
"sass": "^1.70.0",
87+
"sass": "^1.89.2",
8888
"semantic-release": "^23.0.0",
89-
"stylelint": "^16.2.1",
89+
"stylelint": "^16.23.0",
9090
"stylelint-config-rational-order": "^0.1.2",
91-
"stylelint-order": "^6.0.4",
91+
"stylelint-order": "^7.0.0",
9292
"typescript": "^5.3.3",
9393
"video.js": "8.21.0",
94-
"vite": "^5.4.10"
94+
"vite": "^7.0.6"
9595
},
9696
"dependencies": {
9797
"videojs-contrib-eme": "5.5.1"

‎scss/components/_big-play.scss‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
1-
/*
2-
******************************************************************************
3-
-- Big play button: Initial play button shown before the video has played
4-
******************************************************************************
5-
*/
6-
&:hover .vjs-big-play-button {
7-
background-color: #16161688;
8-
transition: background-color .25s ease;
9-
}
1+
@mixin big-play {
2+
/*
3+
******************************************************************************
4+
-- Big play button: Initial play button shown before the video has played
5+
******************************************************************************
6+
*/
7+
&:hover .vjs-big-play-button {
8+
background-color: #16161688;
9+
transition: background-color .25s ease;
10+
}
1011

11-
// Refer to https://github.com/videojs/video.js/pull/8398
12-
.vjs-big-play-button {
13-
width: 2em;
14-
height: 2em;
15-
margin: 0;
16-
font-size: 2.25em;
17-
background: transparent;
18-
border: 0.1em solid #fff;
19-
border-radius: 50%;
20-
transform: translate(-50%, -50%);
21-
transition: background-color .25s ease;
22-
}
12+
// Refer to https://github.com/videojs/video.js/pull/8398
13+
.vjs-big-play-button {
14+
width: 2em;
15+
height: 2em;
16+
margin: 0;
17+
font-size: 2.25em;
18+
background: transparent;
19+
border: 0.1em solid #fff;
20+
border-radius: 50%;
21+
transform: translate(-50%, -50%);
22+
transition: background-color .25s ease;
23+
}
2324

24-
.vjs-big-play-button .vjs-icon-placeholder::before {
25-
position: initial;
26-
display: flex;
27-
align-items: center;
28-
justify-content: center;
29-
font-size: 1.75em;
25+
.vjs-big-play-button .vjs-icon-placeholder::before {
26+
position: initial;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
font-size: 1.75em;
31+
}
3032
}

‎scss/components/_captions-settings.scss‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,74 @@
1-
/*
2-
******************************************************************************
3-
-- Text track settings: Displayed when editing text track parameters
4-
******************************************************************************
5-
*/
6-
.vjs-modal-dialog.vjs-text-track-settings {
7-
top: 50%;
8-
left: 50%;
9-
max-width: 25em;
10-
max-height: 50em;
11-
background: rgba(22,22,22,.95);
12-
border-radius: 0.5em;
13-
box-shadow: 2px 2px 3px #0005;
14-
transform: translate(-50%, -50%);
15-
overscroll-behavior: contain;
16-
}
1+
@mixin captions-settings {
172

18-
.vjs-text-track-settings .vjs-modal-dialog-content {
19-
display: flex;
20-
flex-direction: column;
21-
padding: 1em 1.5em 0;
22-
}
3+
/*
4+
******************************************************************************
5+
-- Text track settings: Displayed when editing text track parameters
6+
******************************************************************************
7+
*/
8+
.vjs-modal-dialog.vjs-text-track-settings {
9+
top: 50%;
10+
left: 50%;
11+
max-width: 25em;
12+
max-height: 50em;
13+
background: rgba(22, 22, 22, .95);
14+
border-radius: 0.5em;
15+
box-shadow: 2px 2px 3px #0005;
16+
transform: translate(-50%, -50%);
17+
overscroll-behavior: contain;
18+
}
2319

24-
.vjs-text-track-settings legend {
25-
font-size: 1em;
26-
}
20+
.vjs-text-track-settings .vjs-modal-dialog-content {
21+
display: flex;
22+
flex-direction: column;
23+
padding: 1em 1.5em 0;
24+
}
2725

28-
.vjs-text-track-settings fieldset span {
29-
padding-inline: 0;
30-
}
26+
.vjs-text-track-settings legend {
27+
font-size: 1em;
28+
}
3129

32-
.vjs-text-track-settings fieldset {
33-
display: flex;
34-
margin: 0 0 1em 0;
35-
padding: 0;
36-
}
30+
.vjs-text-track-settings fieldset span {
31+
padding-inline: 0;
32+
}
3733

38-
&.video-js .vjs-text-track-settings select {
39-
margin: 0.25em 0 0 0;
40-
padding: 0.5em;
41-
color: #fff;
42-
background: #3f3f3f;
43-
border: none;
44-
appearance: auto;
34+
.vjs-text-track-settings fieldset {
35+
display: flex;
36+
margin: 0 0 1em 0;
37+
padding: 0;
38+
}
4539

46-
&:focus-within {
47-
outline: solid;
40+
&.video-js .vjs-text-track-settings select {
41+
margin: 0.25em 0 0 0;
42+
padding: 0.5em;
43+
color: #fff;
44+
background: #3f3f3f;
45+
border: none;
46+
appearance: auto;
47+
48+
&:focus-within {
49+
outline: solid;
50+
}
4851
}
49-
}
5052

51-
.vjs-track-settings-controls {
53+
.vjs-track-settings-controls {
5254
display: flex;
5355
flex-direction: row;
5456
gap: 1em;
5557
justify-content: end;
5658

5759
button {
58-
margin-block: 1em;
59-
padding: .25em .5em;
60-
color: #fff;
61-
background: #3f3f3f;
60+
margin-block: 1em;
61+
padding: .25em .5em;
62+
color: #fff;
63+
background: #3f3f3f;
6264

63-
&:hover {
64-
background: #5c5c5c;
65+
&:hover {
66+
background: #5c5c5c;
67+
}
6568
}
66-
}
6769

68-
.vjs-default-button {
69-
margin-right: 0;
70+
.vjs-default-button {
71+
margin-right: 0;
72+
}
7073
}
7174
}

‎scss/components/_control-bar.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
/*
2-
******************************************************************************
3-
-- Control bar: Contains the main controls of the player
4-
******************************************************************************
5-
*/
6-
&:not(.vjs-audio-only-mode) .vjs-control-bar {
7-
align-items: flex-end;
8-
height: 6em;
9-
padding-inline: 1em;
10-
background: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
11-
}
1+
@mixin control-bar {
2+
/*
3+
******************************************************************************
4+
-- Control bar: Contains the main controls of the player
5+
******************************************************************************
6+
*/
7+
&:not(.vjs-audio-only-mode) .vjs-control-bar {
8+
align-items: flex-end;
9+
height: 6em;
10+
padding-inline: 1em;
11+
background: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
12+
}
1213

13-
&.vjs-audio-only-mode .vjs-control-bar {
14-
background-color: #1e232c;
14+
&.vjs-audio-only-mode .vjs-control-bar {
15+
background-color: #1e232c;
16+
}
1517
}

‎scss/components/_control-spacer.scss‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
/*
2-
******************************************************************************
3-
-- Spacer control: Spacer used as an insertion point
4-
******************************************************************************
5-
*/
6-
&:not(.vjs-audio-only-mode) .vjs-custom-control-spacer {
7-
display: block;
8-
flex: auto;
1+
@mixin control-spacer {
2+
/*
3+
******************************************************************************
4+
-- Spacer control: Spacer used as an insertion point
5+
******************************************************************************
6+
*/
7+
&:not(.vjs-audio-only-mode) .vjs-custom-control-spacer {
8+
display: block;
9+
flex: auto;
10+
}
911
}

‎scss/components/_control.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
/*
2-
******************************************************************************
3-
-- Control: Control bar components
4-
******************************************************************************
5-
*/
6-
.vjs-control {
7-
height: 3em;
1+
@mixin control {
2+
/*
3+
******************************************************************************
4+
-- Control: Control bar components
5+
******************************************************************************
6+
*/
7+
.vjs-control {
8+
height: 3em;
9+
}
810
}

‎scss/components/_error.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
/*
2-
******************************************************************************
3-
-- Error: Displayed when an error occurs
4-
******************************************************************************
5-
*/
6-
.vjs-error-display .vjs-modal-dialog-content {
7-
display: flex;
8-
align-items: center;
9-
justify-content: center;
1+
@mixin error {
2+
/*
3+
******************************************************************************
4+
-- Error: Displayed when an error occurs
5+
******************************************************************************
6+
*/
7+
.vjs-error-display .vjs-modal-dialog-content {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
}
1012
}

0 commit comments

Comments
 (0)