Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle video previews #356

Closed
Tracked by #309
gnprice opened this issue Nov 1, 2023 · 0 comments · Fixed by #587
Closed
Tracked by #309

Handle video previews #356

gnprice opened this issue Nov 1, 2023 · 0 comments · Fixed by #587
Labels
a-content Parsing and rendering Zulip HTML content, notably message contents

Comments

@gnprice
Copy link
Member

gnprice commented Nov 1, 2023

We should handle video preview elements in message content. Here's an example message that uses one:
https://chat.zulip.org/#narrow/stream/9-issues/topic/.E2.9C.94.20inbox.20unread.20dot.20only.20present.20in.20view/near/1668976

To get the server's HTML for that message, see comments in test/model/content_test.dart. (Don't try to get the HTML from the web app via browser devtools; this is one kind of content where the web app is known to show HTML that's been adjusted from what the server gave it.)

Handling these means parsing them in lib/model/content.dart, and then displaying them appropriately in lib/widgets/content.dart.


In an ideal version of this feature,

  • we'd start by showing a still thumbnail image, probably with a "this is a video" indication similar to what web has;
  • then if the user taps on the video, we'd play it, probably after going to the lightbox;
  • and when playing, we'd have appropriate controls to pause, to resume, to start over, etc.

If we can readily get all of that functionality off the shelf, then great. If not, then for an initial version it'd be good enough to:

  • start by showing a still thumbnail image, with a "this is a video" indication as above;
  • then if the user taps on the video, send them to a web browser with a link that will let them view it.

In that case we'd file a followup issue for the remaining functionality.

@gnprice gnprice added the a-content Parsing and rendering Zulip HTML content, notably message contents label Nov 1, 2023
@gnprice gnprice added this to the Beta milestone Nov 1, 2023
@gnprice gnprice modified the milestones: Beta 1, Beta 2 Nov 8, 2023
@gnprice gnprice modified the milestones: Beta 2, Beta 3 Nov 22, 2023
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Mar 26, 2024
Implement thumbnail image based video previews for Youtube & Vimeo
video links, and inline video player preview using the video_player
package for user uploaded videos.

For user uploaded video, current implementation will fetch the metadata
when the message containing the video comes into view. This metadata
is used by the player to determine if video is supported on the device.
If it isn't then there will be no preview, and tapping on the play
button will open the video externally. If the video is supported, then
the first frame of the video will be presented as a preview in the
message container while tapping on the play button will start buffering
and playing the video in the lightbox.

There are still some quirks with the current implementation:

- On iOS/macOS, there is a bug where whole video is downloaded before
  playing: flutter/flutter#126760

- On iOS/macOS, unlike on Android the first frame is not shown after
  initialization: flutter/flutter#139107

- Current implementation uses url_launcher for fallback in case video
  is not supported by video_player, we should switch to webview
  instead to correctly handle auth headers for private videos.

Fixes zulip#356
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Mar 26, 2024
Implement thumbnail image based video previews for Youtube & Vimeo
video links, and inline video player preview using the video_player
package for user uploaded videos.

For user uploaded video, current implementation will fetch the metadata
when the message containing the video comes into view. This metadata
is used by the player to determine if video is supported on the device.
If it isn't then there will be no preview, and tapping on the play
button will open the video externally. If the video is supported, then
the first frame of the video will be presented as a preview in the
message container while tapping on the play button will start buffering
and playing the video in the lightbox.

There are still some quirks with the current implementation:

- On iOS/macOS, there is a bug where whole video is downloaded before
  playing: flutter/flutter#126760

- On iOS/macOS, unlike on Android the first frame is not shown after
  initialization: flutter/flutter#139107

- Current implementation uses url_launcher for fallback in case video
  is not supported by video_player, we should switch to webview
  instead to correctly handle auth headers for private videos.

Fixes zulip#356
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Mar 26, 2024
Implement thumbnail image based video previews for Youtube & Vimeo
video links, and inline video player preview using the video_player
package for user uploaded videos.

For user uploaded video, current implementation will fetch the metadata
when the message containing the video comes into view. This metadata
is used by the player to determine if video is supported on the device.
If it isn't then there will be no preview, and tapping on the play
button will open the video externally. If the video is supported, then
the first frame of the video will be presented as a preview in the
message container while tapping on the play button will start buffering
and playing the video in the lightbox.

There are still some quirks with the current implementation:

- On iOS/macOS, there is a bug where whole video is downloaded before
  playing: flutter/flutter#126760

- On iOS/macOS, unlike on Android the first frame is not shown after
  initialization: flutter/flutter#139107

- Current implementation uses url_launcher for fallback in case video
  is not supported by video_player, we should switch to webview
  instead to correctly handle auth headers for private videos.

Fixes zulip#356
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Mar 28, 2024
Implement thumbnail image based video previews for Youtube & Vimeo
video links, and inline video player preview using the video_player
package for user uploaded videos.

For user uploaded video, current implementation will fetch the metadata
when the message containing the video comes into view. This metadata
is used by the player to determine if video is supported on the device.
If it isn't then there will be no preview, and tapping on the play
button will open the video externally. If the video is supported, then
the first frame of the video will be presented as a preview in the
message container while tapping on the play button will start buffering
and playing the video in the lightbox.

There are still some quirks with the current implementation:

- On iOS/macOS, there is a bug where whole video is downloaded before
  playing: flutter/flutter#126760

- On iOS/macOS, unlike on Android the first frame is not shown after
  initialization: flutter/flutter#139107

- Current implementation uses url_launcher for fallback in case video
  is not supported by video_player, we should switch to webview
  instead to correctly handle auth headers for private videos.

Fixes zulip#356
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Mar 29, 2024
Implement thumbnail image based video previews for Youtube & Vimeo
video links, and inline video player preview using the video_player
package for user uploaded videos.

For user uploaded video, current implementation will fetch the metadata
when the message containing the video comes into view. This metadata
is used by the player to determine if video is supported on the device.
If it isn't then there will be no preview, and tapping on the play
button will open the video externally. If the video is supported, then
the first frame of the video will be presented as a preview in the
message container while tapping on the play button will start buffering
and playing the video in the lightbox.

There are still some quirks with the current implementation:

- On iOS/macOS, there is a bug where whole video is downloaded before
  playing: flutter/flutter#126760

- On iOS/macOS, unlike on Android the first frame is not shown after
  initialization: flutter/flutter#139107

- Current implementation uses url_launcher for fallback in case video
  is not supported by video_player, we should switch to webview
  instead to correctly handle auth headers for private videos.

Fixes zulip#356
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 5, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 6, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 6, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 6, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 6, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 12, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue Apr 13, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 2, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 2, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 2, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 2, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 5, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 5, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 5, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 5, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 9, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 9, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 9, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 9, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 10, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 10, 2024
rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue May 10, 2024
gnprice pushed a commit to rajveermalviya/zulip-flutter that referenced this issue May 10, 2024
Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-content Parsing and rendering Zulip HTML content, notably message contents
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

1 participant