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.

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

Session内にYoutubeを載せる実装 #220

Merged
merged 13 commits into from
Dec 20, 2023
Merged

Session内にYoutubeを載せる実装 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
855dd18
add: youtube_player_iframeを導入しました
Dec 8, 2023
2502214
add: youtubeの動画を埋め込んでみました
Dec 8, 2023
f1101d2
add: youtubeのurlの切り分けを書いてみました
Dec 8, 2023
a1e4450
fix: 重複していたタイトルを削除しました
Dec 8, 2023
ef3a503
fix: youtubeGap => youtubeWidthに修正しまいた
Dec 13, 2023
86e7815
fix: MediaQueryの記載方法を修正しました
Dec 13, 2023
daa9daf
fix: youtubeのリンクをextensionを使用して修正してみました
Dec 13, 2023
a1c58b6
fix: YoutubePlayerControllerのproviderを作成してみました
Dec 13, 2023
09169a4
fix: youtube_providerを削除し、contents内でYoutubePlayerControllerを使用する実装をしました
Dec 18, 2023
a8fa189
fix: 改行を修正しました
Dec 18, 2023
470bf49
fix: switch文の修正をしました
Dec 18, 2023
fa9efa0
add: youtubeUrlにわかりやすくタイトルをコメントで記載してみました
Dec 18, 2023
c3f7c13
fix: StatefulからHookWidgetに変更してみました
Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions lib/features/session/data/session.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,33 @@ extension SessionTimeText on Session {
return '$startsAtText〜$endsAtText';
}
}

extension SessionYoutubeUrlEx on TalkSession {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

badge
YoutubeUrl って Session モデルを欲しているクラスで必ずしも欲しい情報ではない (二次的な情報？)ので、 session_youtube_ex.dart とファイルを切り出しても良さそうですね。
必要なクラスのみ↑をimportするという。

Copy link
Contributor Author

@iseruuuuu iseruuuuu Dec 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@daiki1003
他の実装を見る感じだと、Session.dart内でまとめているのかなという印象を受けて統一して実装してみました。例えば、

extension TalkSessionIsSponsored on TalkSession {
  bool get isSponsored {
    return tags.any((tag) => tag.name == 'Sponsored');
  }
}

この辺りの実装もSession モデルを欲しているクラスで必ずしも欲しい情報ではないと思いましたがSession.dart内で記載があったため、合わせる方でやりました！（意図が間違っていたらすみません🙇）

String get youtubeUrl => switch (uuid) {
// Add Material touch ripples
'21abbd32-6864-487a-8066-c9d7f7e5e9be' => 'cMS2FzbhXJ8',
// 出前館におけるFlutterの現在とこれから
'5b402df3-9e5d-4c0b-80fa-61d9ba356594' => 'bKnvn-Orpd0',
// DartによるBFF構築・運用 〜Dart Frog×melos〜
'972ffbac-422b-4d4b-9686-f59c4438da04' => 'jNmyr-TZVfU',
// ゆめみの Flutter エンジニア育成方法
'84b1350e-b76e-4cdc-884b-37a4a6e14846' => 'UGxzjYNHH90',
// Flutterアプリのセキュリティ対策を考えてみる
'090ad5b8-7066-40e6-8ca8-58fff766f046' => 'lObSpRxP1Do',
// 我々にはなぜ Riverpod が必要なのか - InheritedWidget から始まる app state 管理手法の課題
'0b32515e-2c80-45f4-8ea2-c6c269d2609f' => '2SnTNFAzmY0',
// Flutter アプリにおけるテスト戦略の見直しと自動テストの導入
'df52c995-5fbb-4ff0-abbc-e6332af98797' => 'VHhZlTDfwIQ',
// 詳解！Flutterにおける課金実装
'67df96a0-4f03-401a-b740-c296a5bcbd86' => 'NcfrY-EN8Pg',
// Master of Flutter lifecycle
'f76c37b8-172d-4072-ad4a-bd870bc15728' => 'sznsAolD6dI',
// Dartのコード自動生成の仕組みと、コード自動生成のパッケージを自作する方法について
'd9cc75af-a3a2-4d0e-af6c-f12aa143ba4c' => 'EKoI-p1UnNk',
// Flutterで構築する漫画ビューア
'076d093c-a1ff-4fe3-be58-8f8536c97de3' => 'vCoG6BTNpAA',
// 魅せろ！ Flutter で目を惹く UI デザインを実装する
'2b0118b0-52d2-4a9c-a564-faf50651dea2' => '6zLih07J3RU',
_ => '',
};
}
2 changes: 2 additions & 0 deletions lib/features/session/ui/detail/session_detail.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class SessionDetail extends ConsumerWidget {
cardPadding: 40,
contentGap: 40,
sectionGap: 80,
youtubeWidth: MediaQuery.sizeOf(context).width / 1.5,
bodyVerticalMargin: 20,
sectionHeaderTextStyle: AppTextStyle.pcHeading1,
sessionTitleTextStyle: textTheme.displayMedium!,
Expand All @@ -38,6 +39,7 @@ class SessionDetail extends ConsumerWidget {
cardPadding: 24,
contentGap: 16,
sectionGap: 80,
youtubeWidth: double.infinity,
bodyVerticalMargin: 16,
sectionHeaderTextStyle: AppTextStyle.spHeading1,
sessionTitleTextStyle: textTheme.displaySmall!,
Expand Down
30 changes: 27 additions & 3 deletions lib/features/session/ui/detail/session_detail_content.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import 'package:confwebsite2023/features/session/data/session.dart';
import 'package:confwebsite2023/features/sponsor/data/sponsor.dart';
import 'package:confwebsite2023/features/sponsor/ui/detail/sponsor_detail_logo_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:url_launcher/link.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class SessionDetailContent extends StatelessWidget {
class SessionDetailContent extends HookWidget {
const SessionDetailContent({
required this.session,
required this.sponsor,
Expand All @@ -21,6 +23,7 @@ class SessionDetailContent extends StatelessWidget {
required this.contentGap,
required this.sectionGap,
required this.cardPadding,
required this.youtubeWidth,
required this.bodyVerticalMargin,
super.key,
});
Expand All @@ -32,17 +35,27 @@ class SessionDetailContent extends StatelessWidget {
final double cardPadding;
final double contentGap;
final double sectionGap;
final double youtubeWidth;
final double bodyVerticalMargin;

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;

late YoutubePlayerController controller;
useEffect(
() {
controller = YoutubePlayerController.fromVideoId(
videoId: session.youtubeUrl,
params: const YoutubePlayerParams(showFullscreenButton: true),
);
return controller.close;
},
[],
);
final contentVerticalGap = SizedBox(height: contentGap);
final sectionVerticalGap = SizedBox(height: sectionGap);
final bodyVerticalGap = SizedBox(height: bodyVerticalMargin);

final headerTitle = session.isSponsored ? 'Sponsor Session' : 'Session';
final headerGradient = GradientConstant.accent.primary;
final header = ResponsiveWidget(
Expand Down Expand Up @@ -115,6 +128,15 @@ class SessionDetailContent extends StatelessWidget {
bottom: contentGap / 2,
);

final youtubePlayer = Center(
child: SizedBox(
width: youtubeWidth,
child: YoutubePlayer(
controller: controller,
),
),
);

final body = DecoratedBox(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.35),
Expand Down Expand Up @@ -168,6 +190,8 @@ class SessionDetailContent extends StatelessWidget {
profileBody,
contentVerticalGap,
Divider(color: baselineColorScheme.ref.secondary.secondary50),
contentVerticalGap,
youtubePlayer,
MarkdownBody(
data: session.abstract,
styleSheet: MarkdownStyleSheet.fromTheme(theme).copyWith(
Expand Down
48 changes: 48 additions & 0 deletions pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1002,6 +1002,38 @@ packages:
url: "https://pub.dev"
source: hosted
version: "2.4.0"
webview_flutter:
dependency: transitive
description:
name: webview_flutter
sha256: "42393b4492e629aa3a88618530a4a00de8bb46e50e7b3993fedbfdc5352f0dbf"
url: "https://pub.dev"
source: hosted
version: "4.4.2"
webview_flutter_android:
dependency: transitive
description:
name: webview_flutter_android
sha256: "8326ee235f87605a2bfc444a4abc897f4abc78d83f054ba7d3d1074ce82b4fbf"
url: "https://pub.dev"
source: hosted
version: "3.12.1"
webview_flutter_platform_interface:
dependency: transitive
description:
name: webview_flutter_platform_interface
sha256: "68e86162aa8fc646ae859e1585995c096c95fc2476881fa0c4a8d10f56013a5a"
url: "https://pub.dev"
source: hosted
version: "2.8.0"
webview_flutter_wkwebview:
dependency: transitive
description:
name: webview_flutter_wkwebview
sha256: accdaaa49a2aca2dc3c3230907988954cdd23fed0a19525d6c9789d380f4dc76
url: "https://pub.dev"
source: hosted
version: "3.9.4"
win32:
dependency: transitive
description:
Expand Down Expand Up @@ -1034,6 +1066,22 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.1.2"
youtube_player_iframe:
dependency: "direct main"
description:
name: youtube_player_iframe
sha256: d7aec9083430db4e5da83a3b5d7b7fcbb93cfa027d9f680ce3c7e7cd20724305
url: "https://pub.dev"
source: hosted
version: "4.0.4"
youtube_player_iframe_web:
dependency: transitive
description:
name: youtube_player_iframe_web
sha256: c7020816031600349b56d2729d4e8be011fcb723ff7dc2dd0cdf72096a0e5ff4
url: "https://pub.dev"
source: hosted
version: "2.0.2"
sdks:
dart: ">=3.2.0-42.2.beta <4.0.0"
flutter: ">=3.14.0-0.2.pre"
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ dependencies:
riverpod_annotation: ^2.1.1
transparent_image: ^2.0.1
url_launcher: ^6.1.11
youtube_player_iframe: ^4.0.4

dev_dependencies:
build_runner: ^2.4.5
Expand Down
Loading