@oat-sa/tao-core-ui 3.18.4 → 3.18.6

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 (6) hide show
  1. package/dist/mediaplayer.js +10 -5
  2. package/package.json +1 -1
  3. package/scss/inc/_base.scss +60 -33
  4. package/src/css/basic.css +43 -14
  5. package/src/css/basic.css.map +1 -1
  6. package/src/mediaplayer.js +13 -5
package/dist/mediaplayer.js CHANGED
@@ -339,6 +339,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
339
339
  */
340
340
  render(to) {
341
341
  const renderTo = to || this.config.renderTo || this.$container;
342
+ const isVertical = ($$1('body').hasClass('item-writing-mode-vertical-rl') || $$1(renderTo).closest('.qti-interaction, .custom-text-box').hasClass('writing-mode-vertical-rl')) && !$$1(renderTo).closest('.qti-interaction, .custom-text-box').hasClass('writing-mode-horizontal-tb');
342
343
  if (this.$component) {
343
344
  this.destroy();
344
345
  }
@@ -352,12 +353,16 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
352
353
  this._playingState(false, true);
353
354
  this._initPlayer();
354
355
  this._initSize();
355
-
356
- // Resize for old items with defined height to avoid big jump
357
- if (this.config.height && this.config.height !== 'auto') {
358
- this.resize('100%', 'auto');
356
+ if (isVertical) {
357
+ // Change size axis for vertical writing view mode
358
+ this.resize(this.config.height, this.config.width);
359
359
  } else {
360
- this.resize(this.config.width, this.config.height);
360
+ // Resize for old items with defined height to avoid big jump
361
+ if (this.config.height && this.config.height !== 'auto') {
362
+ this.resize('100%', 'auto');
363
+ } else {
364
+ this.resize(this.config.width, this.config.height);
365
+ }
361
366
  }
362
367
  this.config.is.rendered = true;
363
368
  if (renderTo) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oat-sa/tao-core-ui",
3
- "version": "3.18.4",
3
+ "version": "3.18.6",
4
4
  "displayName": "TAO Core UI",
5
5
  "description": "UI libraries of TAO",
6
6
  "scripts": {
package/scss/inc/_base.scss CHANGED
@@ -673,28 +673,25 @@ body {
673
673
  }
674
674
  }
675
675
 
676
- ruby rt {
677
- & > .txt-wavy {
678
- @include writing-mode-vertical-rl {
679
- position: relative;
680
- left: 5px;
681
- }
682
- @include writing-mode-horizontal-tb {
683
- position: relative;
684
- left: auto;
685
- }
676
+ ruby rb:has(.txt-wavy) + rt {
677
+ @include writing-mode-vertical-rl {
678
+ position: relative;
679
+ left: 5px;
680
+ }
681
+ @include writing-mode-horizontal-tb {
682
+ position: relative;
683
+ left: auto;
686
684
  }
685
+ }
687
686
 
688
- & > .txt-underline,
689
- & > .txt-dashed {
690
- @include writing-mode-vertical-rl {
691
- position: relative;
692
- left: 2px;
693
- }
694
- @include writing-mode-horizontal-tb {
695
- position: relative;
696
- left: auto;
697
- }
687
+ ruby rb:has(.txt-underline, .txt-dashed) + rt {
688
+ @include writing-mode-vertical-rl {
689
+ position: relative;
690
+ left: 2px;
691
+ }
692
+ @include writing-mode-horizontal-tb {
693
+ position: relative;
694
+ left: auto;
698
695
  }
699
696
  }
700
697
 
@@ -702,6 +699,22 @@ body {
702
699
  .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) {
703
700
  writing-mode: horizontal-tb;
704
701
  direction: rtl;
702
+ height: 100%;
703
+ width: auto;
704
+ margin: 0;
705
+
706
+ div[data-src][data-type] {
707
+ // script sets inline width only — override it; height fills container for nesting
708
+ width: auto !important;
709
+ height: 100%;
710
+ }
711
+
712
+ .mediaplayer .player {
713
+ .media:not(.youtube) {
714
+ width: auto;
715
+ height: 100%;
716
+ }
717
+ }
705
718
 
706
719
  .mediaplayer .controls {
707
720
  display: inline-block;
@@ -717,7 +730,7 @@ body {
717
730
  .mediaplayer .controls .control {
718
731
  display: block;
719
732
 
720
- &.actions .action{
733
+ &.actions .action {
721
734
  position: relative;
722
735
  top: 3px;
723
736
  }
@@ -730,6 +743,25 @@ body {
730
743
  }
731
744
  }
732
745
 
746
+ .qti-item .writing-mode-horizontal-tb .media-container,
747
+ .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
748
+ direction: ltr;
749
+ width: 100%;
750
+ height: auto;
751
+
752
+ div[data-src][data-type] {
753
+ width: inherit !important;
754
+ height: auto;
755
+ }
756
+
757
+ .mediaplayer .player {
758
+ .media:not(.youtube) {
759
+ width: 100%;
760
+ height: auto;
761
+ }
762
+ }
763
+ }
764
+
733
765
  [data-useragent-browser='safari'] {
734
766
  &.writing-mode-vertical-rl,
735
767
  .writing-mode-vertical-rl {
@@ -737,12 +769,11 @@ body {
737
769
  .txt-dashed {
738
770
  text-underline-offset: -0.1em;
739
771
  }
740
- ruby rt {
741
- & > .txt-wavy,
742
- & > .txt-underline,
743
- & > .txt-dashed {
744
- left: 0;
745
- }
772
+ ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
773
+ left: 0;
774
+ }
775
+ ruby rb:has(.txt-wavy) + rt {
776
+ left: 0;
746
777
  }
747
778
  }
748
779
  &,
@@ -751,12 +782,8 @@ body {
751
782
  .txt-dashed {
752
783
  text-underline-offset: auto;
753
784
  }
754
- ruby rt {
755
- & > .txt-wavy,
756
- & > .txt-underline,
757
- & > .txt-dashed {
758
- left: auto;
759
- }
785
+ ruby rb:has(.txt-wavy,.txt-underline,.txt-dashed) + rt {
786
+ left: auto;
760
787
  }
761
788
  }
762
789
  }
package/src/css/basic.css CHANGED
@@ -1619,30 +1619,30 @@ html .writing-mode-vertical-rl .writing-mode-horizontal-tb .txt-wavy ruby rt {
1619
1619
  inset-block-start: auto;
1620
1620
  }
1621
1621
 
1622
- html .writing-mode-vertical-rl ruby rt > .txt-wavy {
1622
+ html .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
1623
1623
  position: relative;
1624
1624
  left: 5px;
1625
1625
  }
1626
1626
 
1627
- html ruby rt > .txt-wavy {
1627
+ html ruby rb:has(.txt-wavy) + rt {
1628
1628
  position: relative;
1629
1629
  left: auto;
1630
1630
  }
1631
- html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rt > .txt-wavy {
1631
+ html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rb:has(.txt-wavy) + rt {
1632
1632
  position: relative;
1633
1633
  left: auto;
1634
1634
  }
1635
1635
 
1636
- html .writing-mode-vertical-rl ruby rt > .txt-underline, html .writing-mode-vertical-rl ruby rt > .txt-dashed {
1636
+ html .writing-mode-vertical-rl ruby rb:has(.txt-underline, .txt-dashed) + rt {
1637
1637
  position: relative;
1638
1638
  left: 2px;
1639
1639
  }
1640
1640
 
1641
- html ruby rt > .txt-underline, html ruby rt > .txt-dashed {
1641
+ html ruby rb:has(.txt-underline, .txt-dashed) + rt {
1642
1642
  position: relative;
1643
1643
  left: auto;
1644
1644
  }
1645
- html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rt > .txt-underline, html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rt > .txt-dashed {
1645
+ html .writing-mode-vertical-rl .writing-mode-horizontal-tb ruby rb:has(.txt-underline, .txt-dashed) + rt {
1646
1646
  position: relative;
1647
1647
  left: auto;
1648
1648
  }
@@ -1651,6 +1651,19 @@ html .qti-item .writing-mode-vertical-rl .media-container,
1651
1651
  html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) {
1652
1652
  writing-mode: horizontal-tb;
1653
1653
  direction: rtl;
1654
+ height: 100%;
1655
+ width: auto;
1656
+ margin: 0;
1657
+ }
1658
+ html .qti-item .writing-mode-vertical-rl .media-container div[data-src][data-type],
1659
+ html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
1660
+ width: auto !important;
1661
+ height: 100%;
1662
+ }
1663
+ html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .player .media:not(.youtube),
1664
+ html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
1665
+ width: auto;
1666
+ height: 100%;
1654
1667
  }
1655
1668
  html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls,
1656
1669
  html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls {
@@ -1680,16 +1693,34 @@ html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls
1680
1693
  html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls .control.infos.timer {
1681
1694
  white-space: nowrap;
1682
1695
  }
1696
+ html .qti-item .writing-mode-horizontal-tb .media-container,
1697
+ html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) {
1698
+ direction: ltr;
1699
+ width: 100%;
1700
+ height: auto;
1701
+ }
1702
+ html .qti-item .writing-mode-horizontal-tb .media-container div[data-src][data-type],
1703
+ html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) div[data-src][data-type] {
1704
+ width: inherit !important;
1705
+ height: auto;
1706
+ }
1707
+ html .qti-item .writing-mode-horizontal-tb .media-container .mediaplayer .player .media:not(.youtube),
1708
+ html .qti-item .writing-mode-horizontal-tb .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .player .media:not(.youtube) {
1709
+ width: 100%;
1710
+ height: auto;
1711
+ }
1683
1712
  html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-underline,
1684
1713
  html [data-useragent-browser=safari].writing-mode-vertical-rl .txt-dashed,
1685
1714
  html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-underline,
1686
1715
  html [data-useragent-browser=safari] .writing-mode-vertical-rl .txt-dashed {
1687
1716
  text-underline-offset: -0.1em;
1688
1717
  }
1689
- html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rt > .txt-wavy, html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rt > .txt-underline, html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rt > .txt-dashed,
1690
- html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rt > .txt-wavy,
1691
- html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rt > .txt-underline,
1692
- html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rt > .txt-dashed {
1718
+ html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
1719
+ html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
1720
+ left: 0;
1721
+ }
1722
+ html [data-useragent-browser=safari].writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt,
1723
+ html [data-useragent-browser=safari] .writing-mode-vertical-rl ruby rb:has(.txt-wavy) + rt {
1693
1724
  left: 0;
1694
1725
  }
1695
1726
  html [data-useragent-browser=safari] .txt-underline,
@@ -1698,10 +1729,8 @@ html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-underline,
1698
1729
  html [data-useragent-browser=safari] .writing-mode-horizontal-tb .txt-dashed {
1699
1730
  text-underline-offset: auto;
1700
1731
  }
1701
- html [data-useragent-browser=safari] ruby rt > .txt-wavy, html [data-useragent-browser=safari] ruby rt > .txt-underline, html [data-useragent-browser=safari] ruby rt > .txt-dashed,
1702
- html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rt > .txt-wavy,
1703
- html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rt > .txt-underline,
1704
- html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rt > .txt-dashed {
1732
+ html [data-useragent-browser=safari] ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt,
1733
+ html [data-useragent-browser=safari] .writing-mode-horizontal-tb ruby rb:has(.txt-wavy, .txt-underline, .txt-dashed) + rt {
1705
1734
  left: auto;
1706
1735
  }
1707
1736
  html .txt-combine-upright-all {