unified-video-framework 1.4.111 → 1.4.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/web/dist/WebPlayer.d.ts +0 -3
- package/packages/web/dist/WebPlayer.d.ts.map +1 -1
- package/packages/web/dist/WebPlayer.js +8 -309
- package/packages/web/dist/WebPlayer.js.map +1 -1
- package/packages/web/package.json +1 -1
- package/packages/web/src/WebPlayer.ts +8 -345
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unified-video-framework",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.113",
|
|
4
4
|
"description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
|
|
5
5
|
"main": "packages/core/dist/index.js",
|
|
6
6
|
"types": "packages/core/dist/index.d.ts",
|
|
@@ -122,9 +122,6 @@ export declare class WebPlayer extends BasePlayer {
|
|
|
122
122
|
private scheduleHideControls;
|
|
123
123
|
private isFullscreen;
|
|
124
124
|
private setupFullscreenListeners;
|
|
125
|
-
private updateTimeTooltip;
|
|
126
|
-
private hideTimeTooltip;
|
|
127
|
-
private updateProgressTooltip;
|
|
128
125
|
private showShortcutIndicator;
|
|
129
126
|
setSettingsScrollbarStyle(mode: 'default' | 'compact' | 'overlay'): void;
|
|
130
127
|
setSettingsScrollbarConfig(options: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
|
|
@@ -1468,10 +1468,13 @@ export class WebPlayer extends BasePlayer {
|
|
|
1468
1468
|
position: absolute;
|
|
1469
1469
|
top: 0;
|
|
1470
1470
|
left: 0;
|
|
1471
|
-
width: 100%;
|
|
1472
|
-
height: 100%;
|
|
1471
|
+
// width: 100%;
|
|
1472
|
+
// height: 100%;
|
|
1473
|
+
object-fit: cover !important; /* Will crop sides/top/bottom to fill */
|
|
1474
|
+
width: 100vw !important;
|
|
1475
|
+
height: 100vh !important;
|
|
1473
1476
|
background: #000;
|
|
1474
|
-
object-fit: contain;
|
|
1477
|
+
// object-fit: contain;
|
|
1475
1478
|
}
|
|
1476
1479
|
|
|
1477
1480
|
.uvf-watermark-layer {
|
|
@@ -1658,7 +1661,6 @@ export class WebPlayer extends BasePlayer {
|
|
|
1658
1661
|
width: 100%;
|
|
1659
1662
|
position: relative;
|
|
1660
1663
|
cursor: pointer;
|
|
1661
|
-
padding: 16px 0;
|
|
1662
1664
|
overflow: visible;
|
|
1663
1665
|
}
|
|
1664
1666
|
|
|
@@ -1768,157 +1770,10 @@ export class WebPlayer extends BasePlayer {
|
|
|
1768
1770
|
box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
|
|
1769
1771
|
}
|
|
1770
1772
|
|
|
1771
|
-
.uvf-progress-handle {
|
|
1772
|
-
position: absolute;
|
|
1773
|
-
width: 12px;
|
|
1774
|
-
height: 12px;
|
|
1775
|
-
background: radial-gradient(circle,
|
|
1776
|
-
rgba(255, 255, 255, 0.95) 0%,
|
|
1777
|
-
rgba(255, 255, 255, 0.9) 70%,
|
|
1778
|
-
rgba(255, 255, 255, 0.85) 100%
|
|
1779
|
-
);
|
|
1780
|
-
border: 2px solid rgba(255, 87, 34, 0.8);
|
|
1781
|
-
border-radius: 50%;
|
|
1782
|
-
top: 50%;
|
|
1783
|
-
left: 0%;
|
|
1784
|
-
transform: translate(-50%, -50%) scale(0);
|
|
1785
|
-
opacity: 0;
|
|
1786
|
-
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
1787
|
-
box-shadow:
|
|
1788
|
-
0 0 0 0 rgba(255, 87, 34, 0.4),
|
|
1789
|
-
0 4px 12px rgba(0, 0, 0, 0.25),
|
|
1790
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
1791
|
-
cursor: grab;
|
|
1792
|
-
z-index: 3;
|
|
1793
|
-
pointer-events: all;
|
|
1794
|
-
backdrop-filter: blur(8px);
|
|
1795
|
-
}
|
|
1796
1773
|
|
|
1797
|
-
.uvf-progress-bar-wrapper:hover .uvf-progress-handle {
|
|
1798
|
-
opacity: 1;
|
|
1799
|
-
transform: translate(-50%, -50%) scale(1);
|
|
1800
|
-
box-shadow:
|
|
1801
|
-
0 0 0 4px rgba(255, 87, 34, 0.2),
|
|
1802
|
-
0 6px 20px rgba(0, 0, 0, 0.3),
|
|
1803
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
1804
|
-
}
|
|
1805
|
-
|
|
1806
|
-
.uvf-progress-handle:hover {
|
|
1807
|
-
transform: translate(-50%, -50%) scale(1.25);
|
|
1808
|
-
background: radial-gradient(circle,
|
|
1809
|
-
rgba(255, 255, 255, 1) 0%,
|
|
1810
|
-
rgba(255, 255, 255, 0.95) 70%,
|
|
1811
|
-
rgba(255, 255, 255, 0.9) 100%
|
|
1812
|
-
);
|
|
1813
|
-
border-color: rgba(255, 87, 34, 1);
|
|
1814
|
-
box-shadow:
|
|
1815
|
-
0 0 0 6px rgba(255, 87, 34, 0.3),
|
|
1816
|
-
0 8px 25px rgba(255, 87, 34, 0.4),
|
|
1817
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
|
-
.uvf-progress-handle:active,
|
|
1821
|
-
.uvf-progress-handle.dragging {
|
|
1822
|
-
cursor: grabbing;
|
|
1823
|
-
transform: translate(-50%, -50%) scale(1.4);
|
|
1824
|
-
background: radial-gradient(circle,
|
|
1825
|
-
rgba(255, 255, 255, 1) 0%,
|
|
1826
|
-
rgba(255, 255, 255, 0.98) 50%,
|
|
1827
|
-
rgba(255, 255, 255, 0.95) 100%
|
|
1828
|
-
);
|
|
1829
|
-
border-color: #ff4500;
|
|
1830
|
-
box-shadow:
|
|
1831
|
-
0 0 0 8px rgba(255, 87, 34, 0.4),
|
|
1832
|
-
0 12px 35px rgba(255, 69, 0, 0.5),
|
|
1833
|
-
inset 0 2px 0 rgba(255, 255, 255, 0.9);
|
|
1834
|
-
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
1835
|
-
}
|
|
1836
|
-
|
|
1837
|
-
.uvf-time-tooltip {
|
|
1838
|
-
position: absolute;
|
|
1839
|
-
bottom: 32px;
|
|
1840
|
-
left: 0;
|
|
1841
|
-
transform: translateX(-50%) translateY(8px) scale(0.9);
|
|
1842
|
-
background: linear-gradient(135deg,
|
|
1843
|
-
rgba(0, 0, 0, 0.95) 0%,
|
|
1844
|
-
rgba(20, 20, 20, 0.92) 50%,
|
|
1845
|
-
rgba(0, 0, 0, 0.98) 100%
|
|
1846
|
-
);
|
|
1847
|
-
color: #ffffff;
|
|
1848
|
-
padding: 10px 16px;
|
|
1849
|
-
border-radius: 12px;
|
|
1850
|
-
font-size: 13px;
|
|
1851
|
-
font-weight: 600;
|
|
1852
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
1853
|
-
letter-spacing: 0.5px;
|
|
1854
|
-
white-space: nowrap;
|
|
1855
|
-
opacity: 0;
|
|
1856
|
-
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
1857
|
-
pointer-events: none;
|
|
1858
|
-
z-index: 4;
|
|
1859
|
-
box-shadow:
|
|
1860
|
-
0 0 0 1px rgba(255, 255, 255, 0.05),
|
|
1861
|
-
0 8px 32px rgba(0, 0, 0, 0.6),
|
|
1862
|
-
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
1863
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
1864
|
-
backdrop-filter: blur(20px) saturate(1.5);
|
|
1865
|
-
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
1866
|
-
min-width: 52px;
|
|
1867
|
-
text-align: center;
|
|
1868
|
-
}
|
|
1869
|
-
|
|
1870
|
-
/* Glass morphism tooltip arrow with multiple layers */
|
|
1871
|
-
.uvf-time-tooltip::after {
|
|
1872
|
-
content: '';
|
|
1873
|
-
position: absolute;
|
|
1874
|
-
bottom: -10px;
|
|
1875
|
-
left: 50%;
|
|
1876
|
-
transform: translateX(-50%);
|
|
1877
|
-
width: 0;
|
|
1878
|
-
height: 0;
|
|
1879
|
-
border-left: 10px solid transparent;
|
|
1880
|
-
border-right: 10px solid transparent;
|
|
1881
|
-
border-top: 10px solid rgba(0, 0, 0, 0.95);
|
|
1882
|
-
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
|
1883
|
-
}
|
|
1884
|
-
|
|
1885
|
-
.uvf-time-tooltip::before {
|
|
1886
|
-
content: '';
|
|
1887
|
-
position: absolute;
|
|
1888
|
-
bottom: -11px;
|
|
1889
|
-
left: 50%;
|
|
1890
|
-
transform: translateX(-50%);
|
|
1891
|
-
width: 0;
|
|
1892
|
-
height: 0;
|
|
1893
|
-
border-left: 11px solid transparent;
|
|
1894
|
-
border-right: 11px solid transparent;
|
|
1895
|
-
border-top: 11px solid rgba(255, 255, 255, 0.08);
|
|
1896
|
-
z-index: -1;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
/* Enhanced tooltip animations - Only show via JavaScript, not CSS hover */
|
|
1900
|
-
.uvf-time-tooltip.show {
|
|
1901
|
-
opacity: 1 !important;
|
|
1902
|
-
transform: translateX(-50%) translateY(-2px) scale(1) !important;
|
|
1903
|
-
}
|
|
1904
|
-
|
|
1905
|
-
/* Tooltip pulse animation on first hover */
|
|
1906
|
-
@keyframes tooltipPulse {
|
|
1907
|
-
0% { transform: translateX(-50%) translateY(-2px) scale(1); }
|
|
1908
|
-
50% { transform: translateX(-50%) translateY(-4px) scale(1.05); }
|
|
1909
|
-
100% { transform: translateX(-50%) translateY(-2px) scale(1); }
|
|
1910
|
-
}
|
|
1911
|
-
|
|
1912
|
-
.uvf-time-tooltip.pulse {
|
|
1913
|
-
animation: tooltipPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) once;
|
|
1914
|
-
}
|
|
1915
1774
|
|
|
1916
1775
|
/* Mobile responsive design with enhanced touch targets */
|
|
1917
1776
|
@media (max-width: 768px) {
|
|
1918
|
-
.uvf-progress-bar-wrapper {
|
|
1919
|
-
padding: 20px 0; /* Larger touch area */
|
|
1920
|
-
}
|
|
1921
|
-
|
|
1922
1777
|
.uvf-progress-bar {
|
|
1923
1778
|
height: 3px; /* Slightly thicker on mobile */
|
|
1924
1779
|
}
|
|
@@ -1927,51 +1782,8 @@ export class WebPlayer extends BasePlayer {
|
|
|
1927
1782
|
height: 5px;
|
|
1928
1783
|
}
|
|
1929
1784
|
|
|
1930
|
-
.uvf-progress-handle {
|
|
1931
|
-
width: 18px;
|
|
1932
|
-
height: 18px;
|
|
1933
|
-
opacity: 0.8; /* More visible on mobile for discoverability */
|
|
1934
|
-
border-width: 3px;
|
|
1935
|
-
box-shadow:
|
|
1936
|
-
0 0 0 2px rgba(255, 87, 34, 0.3),
|
|
1937
|
-
0 6px 16px rgba(0, 0, 0, 0.3),
|
|
1938
|
-
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
1939
|
-
}
|
|
1940
|
-
|
|
1941
|
-
.uvf-progress-bar-wrapper:hover .uvf-progress-handle,
|
|
1942
|
-
.uvf-progress-handle:active {
|
|
1943
|
-
opacity: 1;
|
|
1944
|
-
transform: translate(-50%, -50%) scale(1);
|
|
1945
|
-
}
|
|
1946
|
-
|
|
1947
|
-
.uvf-progress-handle:hover {
|
|
1948
|
-
transform: translate(-50%, -50%) scale(1.15);
|
|
1949
|
-
box-shadow:
|
|
1950
|
-
0 0 0 4px rgba(255, 87, 34, 0.4),
|
|
1951
|
-
0 8px 20px rgba(255, 87, 34, 0.35),
|
|
1952
|
-
inset 0 2px 0 rgba(255, 255, 255, 0.7);
|
|
1953
|
-
}
|
|
1954
|
-
|
|
1955
|
-
.uvf-progress-handle:active,
|
|
1956
|
-
.uvf-progress-handle.dragging {
|
|
1957
|
-
transform: translate(-50%, -50%) scale(1.3);
|
|
1958
|
-
box-shadow:
|
|
1959
|
-
0 0 0 6px rgba(255, 87, 34, 0.5),
|
|
1960
|
-
0 10px 25px rgba(255, 69, 0, 0.4),
|
|
1961
|
-
inset 0 2px 0 rgba(255, 255, 255, 0.8);
|
|
1962
|
-
}
|
|
1963
1785
|
}
|
|
1964
1786
|
|
|
1965
|
-
/* High DPI displays optimization */
|
|
1966
|
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
1967
|
-
.uvf-progress-handle {
|
|
1968
|
-
background: radial-gradient(circle,
|
|
1969
|
-
rgba(255, 255, 255, 0.98) 0%,
|
|
1970
|
-
rgba(255, 255, 255, 0.92) 70%,
|
|
1971
|
-
rgba(255, 255, 255, 0.88) 100%
|
|
1972
|
-
);
|
|
1973
|
-
}
|
|
1974
|
-
}
|
|
1975
1787
|
/* Controls Row */
|
|
1976
1788
|
.uvf-controls-row {
|
|
1977
1789
|
display: flex;
|
|
@@ -3853,15 +3665,7 @@ export class WebPlayer extends BasePlayer {
|
|
|
3853
3665
|
<div class="uvf-progress-bar">
|
|
3854
3666
|
<div class="uvf-progress-buffered" id="uvf-progress-buffered"></div>
|
|
3855
3667
|
<div class="uvf-progress-filled" id="uvf-progress-filled"></div>
|
|
3856
|
-
<div class="uvf-progress-handle" id="uvf-progress-handle"
|
|
3857
|
-
role="slider"
|
|
3858
|
-
tabindex="0"
|
|
3859
|
-
aria-label="Seek"
|
|
3860
|
-
aria-valuemin="0"
|
|
3861
|
-
aria-valuemax="100"
|
|
3862
|
-
aria-valuenow="0"></div>
|
|
3863
3668
|
</div>
|
|
3864
|
-
<div class="uvf-time-tooltip" id="uvf-time-tooltip">00:00</div>
|
|
3865
3669
|
`;
|
|
3866
3670
|
progressSection.appendChild(progressBar);
|
|
3867
3671
|
const controlsRow = document.createElement('div');
|
|
@@ -4075,69 +3879,19 @@ export class WebPlayer extends BasePlayer {
|
|
|
4075
3879
|
e.stopPropagation();
|
|
4076
3880
|
this.handleVolumeChange(e);
|
|
4077
3881
|
});
|
|
4078
|
-
const progressHandle = document.getElementById('uvf-progress-handle');
|
|
4079
|
-
const timeTooltip = document.getElementById('uvf-time-tooltip');
|
|
4080
3882
|
progressBar?.addEventListener('click', (e) => {
|
|
4081
|
-
|
|
4082
|
-
this.handleProgressChange(e);
|
|
4083
|
-
}
|
|
4084
|
-
});
|
|
4085
|
-
progressHandle?.addEventListener('mousedown', (e) => {
|
|
4086
|
-
e.stopPropagation();
|
|
4087
|
-
this.isDragging = true;
|
|
4088
|
-
progressHandle.classList.add('dragging');
|
|
4089
|
-
});
|
|
4090
|
-
progressHandle?.addEventListener('keydown', (e) => {
|
|
4091
|
-
if (!this.video)
|
|
4092
|
-
return;
|
|
4093
|
-
const step = 5;
|
|
4094
|
-
let handled = false;
|
|
4095
|
-
switch (e.key) {
|
|
4096
|
-
case 'ArrowLeft':
|
|
4097
|
-
case 'ArrowDown':
|
|
4098
|
-
this.seek(Math.max(0, this.video.currentTime - step));
|
|
4099
|
-
handled = true;
|
|
4100
|
-
break;
|
|
4101
|
-
case 'ArrowRight':
|
|
4102
|
-
case 'ArrowUp':
|
|
4103
|
-
this.seek(Math.min(this.video.duration, this.video.currentTime + step));
|
|
4104
|
-
handled = true;
|
|
4105
|
-
break;
|
|
4106
|
-
}
|
|
4107
|
-
if (handled) {
|
|
4108
|
-
e.preventDefault();
|
|
4109
|
-
e.stopPropagation();
|
|
4110
|
-
}
|
|
3883
|
+
this.handleProgressChange(e);
|
|
4111
3884
|
});
|
|
4112
3885
|
progressBar?.addEventListener('mousedown', (e) => {
|
|
4113
|
-
if (e.target === progressHandle)
|
|
4114
|
-
return;
|
|
4115
3886
|
this.isDragging = true;
|
|
4116
3887
|
this.handleProgressChange(e);
|
|
4117
3888
|
});
|
|
4118
|
-
progressBar?.addEventListener('mouseenter', () => {
|
|
4119
|
-
const timeTooltip = document.getElementById('uvf-time-tooltip');
|
|
4120
|
-
if (timeTooltip) {
|
|
4121
|
-
timeTooltip.classList.add('show');
|
|
4122
|
-
}
|
|
4123
|
-
});
|
|
4124
|
-
progressBar?.addEventListener('mouseleave', () => {
|
|
4125
|
-
if (!this.isDragging) {
|
|
4126
|
-
this.hideTimeTooltip();
|
|
4127
|
-
}
|
|
4128
|
-
});
|
|
4129
|
-
progressBar?.addEventListener('mousemove', (e) => {
|
|
4130
|
-
if (!this.isDragging) {
|
|
4131
|
-
this.updateTimeTooltip(e);
|
|
4132
|
-
}
|
|
4133
|
-
});
|
|
4134
3889
|
document.addEventListener('mousemove', (e) => {
|
|
4135
3890
|
if (this.isVolumeSliding) {
|
|
4136
3891
|
this.handleVolumeChange(e);
|
|
4137
3892
|
}
|
|
4138
3893
|
if (this.isDragging && progressBar) {
|
|
4139
3894
|
this.handleProgressChange(e);
|
|
4140
|
-
this.updateProgressTooltip(e);
|
|
4141
3895
|
}
|
|
4142
3896
|
});
|
|
4143
3897
|
document.addEventListener('mouseup', () => {
|
|
@@ -4151,18 +3905,13 @@ export class WebPlayer extends BasePlayer {
|
|
|
4151
3905
|
}
|
|
4152
3906
|
if (this.isDragging) {
|
|
4153
3907
|
this.isDragging = false;
|
|
4154
|
-
progressHandle?.classList.remove('dragging');
|
|
4155
|
-
this.hideTimeTooltip();
|
|
4156
3908
|
}
|
|
4157
3909
|
});
|
|
4158
3910
|
this.video.addEventListener('timeupdate', () => {
|
|
4159
3911
|
const progressFilled = document.getElementById('uvf-progress-filled');
|
|
4160
|
-
|
|
4161
|
-
if (this.video && progressFilled && progressHandle) {
|
|
3912
|
+
if (this.video && progressFilled) {
|
|
4162
3913
|
const percent = (this.video.currentTime / this.video.duration) * 100;
|
|
4163
3914
|
progressFilled.style.width = percent + '%';
|
|
4164
|
-
progressHandle.style.left = percent + '%';
|
|
4165
|
-
progressHandle.setAttribute('aria-valuenow', percent.toString());
|
|
4166
3915
|
}
|
|
4167
3916
|
this.updateTimeDisplay();
|
|
4168
3917
|
});
|
|
@@ -4791,56 +4540,6 @@ export class WebPlayer extends BasePlayer {
|
|
|
4791
4540
|
this.playerWrapper.addEventListener('touchmove', handleTouchMovement, { passive: true });
|
|
4792
4541
|
}
|
|
4793
4542
|
}
|
|
4794
|
-
updateTimeTooltip(e) {
|
|
4795
|
-
const wrapper = document.getElementById('uvf-progress-bar');
|
|
4796
|
-
const innerBar = wrapper?.querySelector('.uvf-progress-bar');
|
|
4797
|
-
const timeTooltip = document.getElementById('uvf-time-tooltip');
|
|
4798
|
-
if (!wrapper || !innerBar || !timeTooltip || !this.video)
|
|
4799
|
-
return;
|
|
4800
|
-
const wrapperRect = wrapper.getBoundingClientRect();
|
|
4801
|
-
const innerRect = innerBar.getBoundingClientRect();
|
|
4802
|
-
const localX = Math.max(0, Math.min(e.clientX - innerRect.left, innerRect.width));
|
|
4803
|
-
const percent = (localX / innerRect.width) * 100;
|
|
4804
|
-
const time = (percent / 100) * this.video.duration;
|
|
4805
|
-
const leftPx = (innerRect.left - wrapperRect.left) + localX;
|
|
4806
|
-
timeTooltip.textContent = this.formatTime(time);
|
|
4807
|
-
timeTooltip.style.left = `${leftPx}px`;
|
|
4808
|
-
timeTooltip.classList.add('show');
|
|
4809
|
-
if (!timeTooltip.classList.contains('pulse') && timeTooltip.classList.contains('show')) {
|
|
4810
|
-
timeTooltip.classList.add('pulse');
|
|
4811
|
-
setTimeout(() => {
|
|
4812
|
-
timeTooltip.classList.remove('pulse');
|
|
4813
|
-
}, 600);
|
|
4814
|
-
}
|
|
4815
|
-
}
|
|
4816
|
-
hideTimeTooltip() {
|
|
4817
|
-
const timeTooltip = document.getElementById('uvf-time-tooltip');
|
|
4818
|
-
if (timeTooltip) {
|
|
4819
|
-
timeTooltip.classList.remove('show');
|
|
4820
|
-
timeTooltip.style.removeProperty('opacity');
|
|
4821
|
-
}
|
|
4822
|
-
}
|
|
4823
|
-
updateProgressTooltip(e) {
|
|
4824
|
-
const wrapper = document.getElementById('uvf-progress-bar');
|
|
4825
|
-
const innerBar = wrapper?.querySelector('.uvf-progress-bar');
|
|
4826
|
-
const timeTooltip = document.getElementById('uvf-time-tooltip');
|
|
4827
|
-
const progressHandle = document.getElementById('uvf-progress-handle');
|
|
4828
|
-
if (!wrapper || !innerBar || !timeTooltip || !this.video)
|
|
4829
|
-
return;
|
|
4830
|
-
const wrapperRect = wrapper.getBoundingClientRect();
|
|
4831
|
-
const innerRect = innerBar.getBoundingClientRect();
|
|
4832
|
-
const localX = Math.max(0, Math.min(e.clientX - innerRect.left, innerRect.width));
|
|
4833
|
-
const percent = (localX / innerRect.width) * 100;
|
|
4834
|
-
const time = (percent / 100) * this.video.duration;
|
|
4835
|
-
const leftPx = (innerRect.left - wrapperRect.left) + localX;
|
|
4836
|
-
timeTooltip.textContent = this.formatTime(time);
|
|
4837
|
-
timeTooltip.style.left = `${leftPx}px`;
|
|
4838
|
-
timeTooltip.classList.add('show');
|
|
4839
|
-
if (progressHandle && this.isDragging) {
|
|
4840
|
-
progressHandle.style.transform = 'translate(-50%, -50%) scale(1.4)';
|
|
4841
|
-
progressHandle.classList.add('dragging');
|
|
4842
|
-
}
|
|
4843
|
-
}
|
|
4844
4543
|
showShortcutIndicator(text) {
|
|
4845
4544
|
const el = document.getElementById('uvf-shortcut-indicator');
|
|
4846
4545
|
this.debugLog('showShortcutIndicator called with:', text, 'element found:', !!el);
|