stormcloud-video-player 0.7.39 → 0.7.41

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.
Files changed (15) hide show
  1. package/dist/stormcloud-vp.min.js +1 -1
  2. package/lib/index.cjs +338 -115
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.d.cts +11 -2
  5. package/lib/index.d.ts +11 -2
  6. package/lib/index.js +319 -116
  7. package/lib/index.js.map +1 -1
  8. package/lib/ui/OverlayRenderer.cjs +163 -68
  9. package/lib/ui/OverlayRenderer.cjs.map +1 -1
  10. package/lib/ui/StormcloudVideoPlayer.cjs +318 -115
  11. package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
  12. package/lib/utils/overlays.cjs +171 -18
  13. package/lib/utils/overlays.cjs.map +1 -1
  14. package/lib/utils/overlays.d.cts +11 -2
  15. package/package.json +1 -1
package/lib/ui/OverlayRenderer.cjs CHANGED
@@ -344,6 +344,39 @@ function isOverlayActive(overlay, currentTime) {
344
344
  if (durationSec <= 0) return false;
345
345
  return currentTime >= startSec && currentTime < startSec + durationSec;
346
346
  }
347
+ var SWIRL_HD_AUTHORING_WIDTH = 1920;
348
+ var SWIRL_HD_AUTHORING_HEIGHT = 1080;
349
+ var NAB_DEMO_NAME_PREFIX = "NAB Demo \u2014 ";
350
+ function overlayAuthoringDimensions(overlay, decodeWidth, decodeHeight) {
351
+ if (!decodeWidth || !decodeHeight) {
352
+ return {
353
+ width: decodeWidth || SWIRL_HD_AUTHORING_WIDTH,
354
+ height: decodeHeight || SWIRL_HD_AUTHORING_HEIGHT
355
+ };
356
+ }
357
+ if (!overlay.visible) {
358
+ return {
359
+ width: decodeWidth,
360
+ height: decodeHeight
361
+ };
362
+ }
363
+ var extR = overlay.x + overlay.width;
364
+ var extB = overlay.y + overlay.height;
365
+ var EPS = 2;
366
+ var exceedsDecode = extR > decodeWidth + EPS || extB > decodeHeight + EPS;
367
+ var isNabDemo = overlay.name.startsWith(NAB_DEMO_NAME_PREFIX);
368
+ var isSyntheticMarketsTicker = overlay.id === -9001 || overlay.name === "Demo stock ticker";
369
+ if (exceedsDecode && (isNabDemo || isSyntheticMarketsTicker)) {
370
+ return {
371
+ width: SWIRL_HD_AUTHORING_WIDTH,
372
+ height: SWIRL_HD_AUTHORING_HEIGHT
373
+ };
374
+ }
375
+ return {
376
+ width: decodeWidth,
377
+ height: decodeHeight
378
+ };
379
+ }
347
380
  function resolveImageUrl(imageUrl) {
348
381
  var apiBaseUrl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : OVERLAY_API_BASE;
349
382
  if (!imageUrl) return "";
@@ -720,12 +753,14 @@ function ScrollerOverlay(param) {
720
753
  var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0.95;
721
754
  var borderRadius = (_ref6 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref6 !== void 0 ? _ref6 : 0;
722
755
  var itemSpacing = (_ref7 = cfg === null || cfg === void 0 ? void 0 : cfg.item_spacing) !== null && _ref7 !== void 0 ? _ref7 : 60;
756
+ var pad = (cfg === null || cfg === void 0 ? void 0 : cfg.padding) !== void 0 && cfg.padding >= 0 ? cfg.padding : 8;
723
757
  var label = (_ref8 = cfg === null || cfg === void 0 ? void 0 : cfg.label) !== null && _ref8 !== void 0 ? _ref8 : "NEWS";
724
758
  var labelLine2 = (_ref9 = cfg === null || cfg === void 0 ? void 0 : cfg.label_line2) !== null && _ref9 !== void 0 ? _ref9 : "";
725
759
  var labelColor = (_ref10 = cfg === null || cfg === void 0 ? void 0 : cfg.label_color) !== null && _ref10 !== void 0 ? _ref10 : "#f97316";
726
760
  var labelTextColor = (_ref11 = cfg === null || cfg === void 0 ? void 0 : cfg.label_text_color) !== null && _ref11 !== void 0 ? _ref11 : "#ffffff";
727
761
  var accentColor = (_ref12 = cfg === null || cfg === void 0 ? void 0 : cfg.accent_color) !== null && _ref12 !== void 0 ? _ref12 : labelColor;
728
762
  var showAccentLine = (cfg === null || cfg === void 0 ? void 0 : cfg.show_accent_line) !== false;
763
+ var isEquitiesStrip = (cfg === null || cfg === void 0 ? void 0 : cfg.preset) === "equities_strip";
729
764
  var isHorizontal = direction === "left" || direction === "right";
730
765
  var isReverse = direction === "right" || direction === "down";
731
766
  var fullText = segments.join(" ".concat(sep, " "));
@@ -756,7 +791,7 @@ function ScrollerOverlay(param) {
756
791
  children: [
757
792
  showAccentLine && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
758
793
  style: {
759
- height: 3,
794
+ height: isEquitiesStrip ? 2 : 3,
760
795
  background: accentColor,
761
796
  flexShrink: 0,
762
797
  width: "100%"
@@ -767,42 +802,50 @@ function ScrollerOverlay(param) {
767
802
  display: "flex",
768
803
  flex: 1,
769
804
  overflow: "hidden",
770
- minHeight: 0
805
+ minHeight: 0,
806
+ alignItems: "center",
807
+ padding: isEquitiesStrip ? "".concat(Math.max(2, pad * 0.5), "px ").concat(pad, "px") : "".concat(Math.max(4, pad * 0.75), "px ").concat(pad, "px"),
808
+ gap: isEquitiesStrip ? Math.max(4, Math.round(pad * 0.75)) : Math.max(6, pad),
809
+ boxSizing: "border-box"
771
810
  },
772
811
  children: [
773
812
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
774
813
  style: {
775
814
  background: labelColor,
776
815
  color: labelTextColor,
777
- padding: "0 14px",
816
+ padding: isEquitiesStrip ? "6px 12px" : "10px 14px",
778
817
  display: "flex",
779
- flexDirection: "column",
818
+ flexDirection: isEquitiesStrip ? "row" : "column",
780
819
  alignItems: "center",
781
820
  justifyContent: "center",
782
821
  flexShrink: 0,
783
- minWidth: 72,
784
822
  textAlign: "center",
785
- gap: 1
823
+ gap: isEquitiesStrip ? 0 : 2,
824
+ borderRadius: Math.max(2, borderRadius > 0 ? borderRadius : 6),
825
+ boxShadow: isEquitiesStrip ? "inset 0 1px 0 rgba(255,255,255,0.08)" : "0 2px 8px rgba(0,0,0,0.35)",
826
+ alignSelf: "stretch",
827
+ maxWidth: isEquitiesStrip ? "min(200px, 28%)" : void 0
786
828
  },
787
829
  children: [
788
830
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
789
831
  style: {
790
- fontWeight: 800,
791
- fontSize: "0.82em",
792
- letterSpacing: "0.05em",
793
- lineHeight: 1.1,
794
- textTransform: "uppercase",
795
- whiteSpace: "nowrap"
832
+ fontWeight: isEquitiesStrip ? 700 : 800,
833
+ fontSize: isEquitiesStrip ? "0.82em" : "0.78em",
834
+ letterSpacing: isEquitiesStrip ? "0.04em" : "0.08em",
835
+ lineHeight: 1.2,
836
+ textTransform: isEquitiesStrip ? "none" : "uppercase",
837
+ whiteSpace: isEquitiesStrip ? "normal" : "nowrap",
838
+ textAlign: isEquitiesStrip ? "left" : "center"
796
839
  },
797
840
  children: label
798
841
  }),
799
- labelLine2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
842
+ labelLine2 && !isEquitiesStrip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
800
843
  style: {
801
- fontWeight: 500,
802
- fontSize: "0.62em",
803
- letterSpacing: "0.03em",
804
- lineHeight: 1.1,
805
- opacity: 0.85,
844
+ fontWeight: 600,
845
+ fontSize: "0.58em",
846
+ letterSpacing: "0.06em",
847
+ lineHeight: 1.15,
848
+ opacity: 0.92,
806
849
  whiteSpace: "nowrap"
807
850
  },
808
851
  children: labelLine2
@@ -811,9 +854,13 @@ function ScrollerOverlay(param) {
811
854
  }),
812
855
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
813
856
  style: {
814
- width: 3,
857
+ width: isEquitiesStrip ? 1 : 2,
858
+ alignSelf: "stretch",
859
+ minHeight: isEquitiesStrip ? 20 : 24,
815
860
  background: accentColor,
816
- flexShrink: 0
861
+ flexShrink: 0,
862
+ borderRadius: 1,
863
+ opacity: 0.85
817
864
  }
818
865
  }),
819
866
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -822,7 +869,8 @@ function ScrollerOverlay(param) {
822
869
  overflow: "hidden",
823
870
  position: "relative",
824
871
  display: "flex",
825
- alignItems: "center"
872
+ alignItems: "center",
873
+ minWidth: 0
826
874
  },
827
875
  children: isHorizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
828
876
  style: {
@@ -902,21 +950,22 @@ function ScoreBugOverlay(param) {
902
950
  var overlay = param.overlay, size = param.size;
903
951
  var cfg = parseConfig(overlay.content);
904
952
  if (!cfg) return null;
905
- var f = Math.max(6, size.w * 0.058);
953
+ var f = Math.max(6, size.w * 0.052);
906
954
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
907
955
  style: {
908
956
  width: "100%",
909
957
  height: "100%",
910
- borderRadius: Math.max(2, size.w * 0.035),
958
+ borderRadius: Math.max(2, size.w * 0.028),
911
959
  display: "flex",
912
960
  flexDirection: "column",
913
961
  background: cfg.backgroundColor,
914
962
  color: cfg.textColor,
915
- fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
963
+ fontFamily: "'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif",
916
964
  overflow: "hidden",
917
965
  pointerEvents: "none",
918
966
  userSelect: "none",
919
- fontSize: "".concat(f, "px")
967
+ fontSize: "".concat(f, "px"),
968
+ boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
920
969
  },
921
970
  children: [
922
971
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -924,28 +973,36 @@ function ScoreBugOverlay(param) {
924
973
  flex: 1,
925
974
  display: "flex",
926
975
  alignItems: "center",
927
- padding: "0 ".concat(f * 0.8, "px"),
928
- gap: f * 0.4
976
+ padding: "".concat(f * 0.42, "px ").concat(f * 0.85, "px"),
977
+ gap: f * 0.45,
978
+ minHeight: 0
929
979
  },
930
980
  children: [
931
981
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
932
982
  style: {
933
983
  flex: 1,
934
- textAlign: "center"
984
+ textAlign: "center",
985
+ minWidth: 0,
986
+ padding: "0 ".concat(f * 0.15, "px")
935
987
  },
936
988
  children: [
937
989
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
938
990
  style: {
939
- fontSize: "1em",
940
- fontWeight: 700
991
+ fontSize: "1.05em",
992
+ fontWeight: 800,
993
+ letterSpacing: "0.02em",
994
+ overflow: "hidden",
995
+ textOverflow: "ellipsis",
996
+ whiteSpace: "nowrap"
941
997
  },
942
998
  children: cfg.homeTeam
943
999
  }),
944
1000
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
945
1001
  style: {
946
- fontSize: "1.8em",
1002
+ fontSize: "1.75em",
947
1003
  fontWeight: 900,
948
- lineHeight: 1
1004
+ lineHeight: 1.05,
1005
+ marginTop: f * 0.08
949
1006
  },
950
1007
  children: cfg.homeScore
951
1008
  })
@@ -953,16 +1010,26 @@ function ScoreBugOverlay(param) {
953
1010
  }),
954
1011
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
955
1012
  style: {
956
- fontSize: "0.8em",
1013
+ fontSize: "0.88em",
957
1014
  textAlign: "center",
958
- opacity: 0.7,
959
- padding: "0 ".concat(f * 0.4, "px")
1015
+ fontWeight: 600,
1016
+ opacity: 0.92,
1017
+ color: cfg.textColor,
1018
+ padding: "0 ".concat(f * 0.5, "px"),
1019
+ flexShrink: 0,
1020
+ lineHeight: 1.25,
1021
+ textTransform: "uppercase",
1022
+ letterSpacing: "0.04em"
960
1023
  },
961
1024
  children: [
962
1025
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
963
1026
  children: cfg.period
964
1027
  }),
965
1028
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
1029
+ style: {
1030
+ fontWeight: 700,
1031
+ opacity: 1
1032
+ },
966
1033
  children: cfg.clock
967
1034
  })
968
1035
  ]
@@ -970,21 +1037,28 @@ function ScoreBugOverlay(param) {
970
1037
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
971
1038
  style: {
972
1039
  flex: 1,
973
- textAlign: "center"
1040
+ textAlign: "center",
1041
+ minWidth: 0,
1042
+ padding: "0 ".concat(f * 0.15, "px")
974
1043
  },
975
1044
  children: [
976
1045
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
977
1046
  style: {
978
- fontSize: "1em",
979
- fontWeight: 700
1047
+ fontSize: "1.05em",
1048
+ fontWeight: 800,
1049
+ letterSpacing: "0.02em",
1050
+ overflow: "hidden",
1051
+ textOverflow: "ellipsis",
1052
+ whiteSpace: "nowrap"
980
1053
  },
981
1054
  children: cfg.awayTeam
982
1055
  }),
983
1056
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
984
1057
  style: {
985
- fontSize: "1.8em",
1058
+ fontSize: "1.75em",
986
1059
  fontWeight: 900,
987
- lineHeight: 1
1060
+ lineHeight: 1.05,
1061
+ marginTop: f * 0.08
988
1062
  },
989
1063
  children: cfg.awayScore
990
1064
  })
@@ -994,23 +1068,27 @@ function ScoreBugOverlay(param) {
994
1068
  }),
995
1069
  (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
996
1070
  style: {
997
- fontSize: "0.7em",
1071
+ fontSize: "0.72em",
998
1072
  textAlign: "center",
999
- opacity: 0.6,
1000
- padding: "".concat(f * 0.2, "px ").concat(f * 0.4, "px"),
1001
- borderTop: "1px solid ".concat(cfg.accentColor, "40"),
1073
+ fontWeight: 600,
1074
+ opacity: 0.88,
1075
+ padding: "".concat(f * 0.34, "px ").concat(f * 0.55, "px"),
1076
+ borderTop: "1px solid ".concat(cfg.accentColor, "55"),
1002
1077
  display: "flex",
1003
1078
  alignItems: "center",
1004
1079
  justifyContent: "center",
1005
- gap: f * 0.4,
1006
- overflow: "hidden"
1080
+ gap: f * 0.45,
1081
+ overflow: "hidden",
1082
+ letterSpacing: "0.04em",
1083
+ textTransform: "uppercase",
1084
+ background: "linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.22) 100%)"
1007
1085
  },
1008
1086
  children: [
1009
1087
  cfg.sponsorImageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
1010
1088
  src: cfg.sponsorImageUrl,
1011
1089
  alt: "sponsor",
1012
1090
  style: {
1013
- height: "".concat(f * 1.4, "px"),
1091
+ height: "".concat(f * 1.35, "px"),
1014
1092
  objectFit: "contain",
1015
1093
  flexShrink: 0
1016
1094
  }
@@ -1032,29 +1110,32 @@ function LowerThirdOverlay(param) {
1032
1110
  var overlay = param.overlay, size = param.size;
1033
1111
  var cfg = parseConfig(overlay.content);
1034
1112
  if (!cfg) return null;
1035
- var f = Math.max(6, size.w * 0.055);
1113
+ var f = Math.max(6, size.w * 0.05);
1114
+ var accentH = Math.max(3, size.h * 0.038);
1036
1115
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
1037
1116
  style: {
1038
1117
  width: "100%",
1039
1118
  height: "100%",
1040
- borderRadius: Math.max(2, size.w * 0.02),
1119
+ borderRadius: Math.max(2, size.w * 0.018),
1041
1120
  display: "flex",
1042
1121
  flexDirection: "column",
1043
1122
  justifyContent: "flex-end",
1044
1123
  background: cfg.backgroundColor,
1045
1124
  color: cfg.textColor,
1046
- fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
1125
+ fontFamily: "'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif",
1047
1126
  overflow: "hidden",
1048
1127
  pointerEvents: "none",
1049
1128
  userSelect: "none",
1050
- fontSize: "".concat(f, "px")
1129
+ fontSize: "".concat(f, "px"),
1130
+ boxShadow: "0 10px 32px rgba(0,0,0,0.4)"
1051
1131
  },
1052
1132
  children: [
1053
1133
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
1054
1134
  style: {
1055
1135
  width: "100%",
1056
- height: Math.max(2, size.h * 0.06),
1057
- backgroundColor: cfg.accentColor
1136
+ height: accentH,
1137
+ backgroundColor: cfg.accentColor,
1138
+ flexShrink: 0
1058
1139
  }
1059
1140
  }),
1060
1141
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -1063,23 +1144,28 @@ function LowerThirdOverlay(param) {
1063
1144
  display: "flex",
1064
1145
  flexDirection: "column",
1065
1146
  justifyContent: "center",
1066
- padding: "".concat(f * 0.5, "px ").concat(f * 1.2, "px")
1147
+ padding: "".concat(f * 0.62, "px ").concat(f * 1.05, "px"),
1148
+ minHeight: 0,
1149
+ gap: f * 0.18
1067
1150
  },
1068
1151
  children: [
1069
1152
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
1070
1153
  style: {
1071
- fontSize: "1.4em",
1072
- fontWeight: 700,
1073
- lineHeight: 1.2,
1074
- textShadow: "0 1px 4px rgba(0,0,0,0.5)"
1154
+ fontSize: "1.28em",
1155
+ fontWeight: 800,
1156
+ lineHeight: 1.22,
1157
+ letterSpacing: "0.01em",
1158
+ textShadow: "0 2px 6px rgba(0,0,0,0.55)"
1075
1159
  },
1076
1160
  children: cfg.headline
1077
1161
  }),
1078
1162
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
1079
1163
  style: {
1080
- fontSize: "1em",
1081
- opacity: 0.7,
1082
- marginTop: f * 0.2
1164
+ fontSize: "0.94em",
1165
+ fontWeight: 500,
1166
+ opacity: 0.92,
1167
+ lineHeight: 1.35,
1168
+ color: cfg.textColor
1083
1169
  },
1084
1170
  children: cfg.subtitle
1085
1171
  })
@@ -1087,20 +1173,24 @@ function LowerThirdOverlay(param) {
1087
1173
  }),
1088
1174
  (cfg.sponsorText || cfg.sponsorImageUrl) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
1089
1175
  style: {
1090
- fontSize: "0.7em",
1091
- opacity: 0.5,
1092
- padding: "0 ".concat(f * 1.2, "px ").concat(f * 0.4, "px"),
1176
+ fontSize: "0.68em",
1177
+ fontWeight: 600,
1178
+ opacity: 0.72,
1179
+ padding: "".concat(f * 0.28, "px ").concat(f * 1.05, "px ").concat(f * 0.48, "px"),
1093
1180
  display: "flex",
1094
1181
  alignItems: "center",
1095
1182
  gap: f * 0.4,
1096
- overflow: "hidden"
1183
+ overflow: "hidden",
1184
+ letterSpacing: "0.06em",
1185
+ textTransform: "uppercase",
1186
+ borderTop: "1px solid rgba(255,255,255,0.08)"
1097
1187
  },
1098
1188
  children: [
1099
1189
  cfg.sponsorImageUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
1100
1190
  src: cfg.sponsorImageUrl,
1101
1191
  alt: "sponsor",
1102
1192
  style: {
1103
- height: "".concat(f * 1.4, "px"),
1193
+ height: "".concat(f * 1.25, "px"),
1104
1194
  objectFit: "contain",
1105
1195
  flexShrink: 0
1106
1196
  }
@@ -2014,8 +2104,13 @@ var OverlayRenderer = function OverlayRenderer(param) {
2014
2104
  },
2015
2105
  children: _to_consumable_array(fadeMap.values()).map(function(param) {
2016
2106
  var overlay = param.overlay, visible = param.visible;
2017
- var scaleX = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.width) ? dims.displayWidth / coordinateSpace.width : dims.scaleX;
2018
- var scaleY = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.height) ? dims.displayHeight / coordinateSpace.height : dims.scaleY;
2107
+ var uniform = coordinateSpace && coordinateSpace.width > 0 && coordinateSpace.height > 0;
2108
+ var auth = uniform ? {
2109
+ width: coordinateSpace.width,
2110
+ height: coordinateSpace.height
2111
+ } : overlayAuthoringDimensions(overlay, dims.nativeWidth, dims.nativeHeight);
2112
+ var scaleX = dims.displayWidth / auth.width;
2113
+ var scaleY = dims.displayHeight / auth.height;
2019
2114
  var left = overlay.x * scaleX;
2020
2115
  var top = overlay.y * scaleY;
2021
2116
  var width = overlay.width * scaleX;