Handle video previews #356

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.

Sign up for GitHub

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

Jump to bottom

Closed

Tracked by

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

Closed

Tracked by

Handle video previews #356

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

Labels

a-content

Milestone

M3: Summer 2024

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.

The text was updated successfully, but these errors were encountered:

gnprice added the a-content label

gnprice added this to the Beta milestone

github-project-automation bot added this to Flutter app

gnprice mentioned this issue

☂️ Handle more content features for beta #309

Closed

9 tasks

gnprice modified the milestones: Beta 1, Beta 2

gnprice modified the milestones: Beta 2, Beta 3

rajveermalviya mentioned this issue

content: Handle video previews #587

Merged

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Handle video previews

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


          content: Handle video previews

bf4e818

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


          content: Handle video previews

b78af2f

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


          content: Handle video previews

af94ffd

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


          content: Handle video previews

8a1a4ff

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


          content: Implement inline video preview

f7face3

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

cac2d42

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

05a4aa5

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

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


          content: Implement inline video preview

18ae14e

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

82b8f6e

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

ff4df78

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

d6f68c7

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


          content: Implement inline video preview

871df2a

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

c963b84

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


          content: Implement inline video preview

4ae65ab

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

4517b88

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

41cfefc

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

c729b5e

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

4b8c3e0

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

02a16e1

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


          content: Implement inline video preview

9d5a16c

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

41e4d3b

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


          content: Implement inline video preview

270fcd3

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

0f4d746

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


          content: Implement inline video preview

a06ad7c

Fixes: zulip#356

rajveermalviya added a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement inline video preview

8a2d60d

Fixes: zulip#356

gnprice pushed a commit to rajveermalviya/zulip-flutter that referenced this issue


          content: Implement embed video preview

1b7ae7f

Partially implements zulip#356, provides video thumbnail previews
for embedded external videos (Youtube & Vimeo).

gnprice closed this as completed in

d5ece54

github-project-automation bot moved this to Done in Flutter app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment