JSO not detect resizing when you modify display:grid; container about javascriptsubtitlesoctopus HOT 10 CLOSED

There may be also solution if manually resize window, but this is a trick.

from javascriptsubtitlesoctopus.

Can you send an example?

from javascriptsubtitlesoctopus.

Clicling on that button trigger JS function what add class to the player, this class change 2 rules for video wrapper: from grid-column: 1; grid-row: 1; to grid-column: 1 / 3; grid-row: 1;.

You can call octopusInstance.resize() (without arguments) after you changed video size. It'll trigger canvas resize and will fix that issue. You can also call it with setTimeout if you have resize animation.

Recently Resize Observer was introduced and it'll allow to resolve this problem without manually calling resize(), but currently it's supported only by Chrome. It's also possible to use polyfill (typically based on checking size of element every X ms which shouldn't be a big problem in case of one element as in our case).

from javascriptsubtitlesoctopus.

Example:
HTML:

<div class="wrap">
    <div class="video">
        <div class="controls">
            <div class="...">...</div>
            ...
        </div>
    </div>
    <div class="playlist"></div>
</div>

video tag insert at te first play later when first file in playlist are selected,
CSS:

/* ... other styles, parent styles... */
.wrap { grid-area: player; grid-template-columns: 1fr 400px; grid-template-rows: 1fr; align-content: stretch; justify-content: stretch; }

.video { grid-column: 1; grid-row: 1; background: #000000; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 16pt; font-weight: 300; white-space: nowrap; grid-template-columns: 1fr; grid-auto-columns: auto; position: relative; display: block; overflow: hidden; }
.video video { width: 100%; height: 100%; object-fit: contain; }
.video .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; grid-template-columns: auto auto 1fr auto auto auto auto; grid-template-rows: auto; grid-gap: 10px; padding: 10px; }
/* control buttons styles... */

.playlist { grid-column: 2; grid-row: 1; position: relative; align-content: start; justify-content: center; align-items: start; padding: 20px; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; overflow: hidden; }
/* playlist inner styles... */

.video.expand { grid-column: 1 / 3; grid-row: 1; z-index: 2; }
.video.hidesubs .libassjs-canvas-parent { visibility: hidden; }

JS code of event when triggering expand mode (video will overlap playlist)

// global...
var videowrap = document.querySelector(".video");
// ...

// event on click expand button:
videowrap.classList.toggle("expand");

from javascriptsubtitlesoctopus.

@Dador If you have code for that, then it not work, because I tested it in Chrome because only Chrome support .mkv video files which is most useful container.
I also tested it in Firefox and Edge and Mobile browsers and it have same behaviour in Firefox.

from javascriptsubtitlesoctopus.

I use versions to develop:
Firefox:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0 ID:20181018123730

Chrome:
70.0.3538.67

from javascriptsubtitlesoctopus.

Well, calling .resize() may be a manual solution, it work with that.
But the stupid thing: when element of the page resized and that affect to the video, subtitles not resized, but when window are resized or you go in fullscreen mode it will resize automatically.

Also will be good if all commands will be briefly explained in README.md, may be there something else useful I don't know.

from javascriptsubtitlesoctopus.

But the stupid thing: when element of the page resized and that affect to the video, subtitles not resized, but when window are resized or you go in fullscreen mode it will resize automatically.

Recently Resize Observer was introduced and it'll allow to resolve this problem without manually calling resize(), but currently it's supported only by Chrome. It's also possible to use polyfill (typically based on checking size of element every X ms which shouldn't be a big problem in case of one element as in our case).

There is currently no way to be notified that an element has changed size. Resize Observer will allow this to happen, but it is currently only supported by Chrome. It is possible to detect the window being resized, so the subtitles do react to that.

from javascriptsubtitlesoctopus.

Ok, so this bug will be open for some time until this ResizeObserver will be supported in all browsers and then used in JSO?

from javascriptsubtitlesoctopus.

Since ResizeObserver is now in all major browsers, i will close this

from javascriptsubtitlesoctopus.