diff --git a/app/[locale]/css/video.module.css b/app/[locale]/css/video.module.css
new file mode 100644
index 000000000..3c7d16aa1
--- /dev/null
+++ b/app/[locale]/css/video.module.css
@@ -0,0 +1,7 @@
+.reactPlayerWrap iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+}
diff --git a/components/video/video-player.tsx b/components/video/video-player.tsx
new file mode 100644
index 000000000..cbe20a96c
--- /dev/null
+++ b/components/video/video-player.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+
+import ReactPlayer from 'react-player/';
+import { VimeoConfig } from 'react-player/vimeo';
+import { YouTubeConfig } from 'react-player/youtube';
+
+import styles from '../../app/[locale]/css/video.module.css';
+
+type VideoPlayerProps = {
+ url: string;
+ playing?: boolean;
+ controls?: boolean;
+ loop?: boolean;
+ autoplay?: boolean;
+ volume?: number;
+ pip?: boolean;
+ width?: string;
+ height?: string;
+ showTitle?: boolean;
+ showPortrait?: boolean;
+ showByline?: boolean;
+ className?: string;
+ onLoaded?: () => void;
+};
+
+const VideoPlayer: FC = (props) => {
+ const {
+ url,
+ playing,
+ controls = false,
+ loop = true,
+ autoplay = true,
+ volume = 0,
+ pip = false,
+ width = '100%',
+ height = '100%',
+ showTitle,
+ showPortrait,
+ showByline,
+ className = `relative w-full h-full ${styles.reactPlayerWrap} aspect-video`,
+ onLoaded = (params: any) => params
+ } = props;
+
+ const [config, setConfig] = useState<{ vimeo: VimeoConfig; youtube: YouTubeConfig }>();
+
+ useEffect(() => {
+ const localConfig = {
+ vimeo: {
+ playerOptions: {
+ showTitle,
+ showPortrait,
+ showByline
+ }
+ },
+ youtube: {
+ embedOptions: {
+ autoplay: 0,
+ controls,
+ loop: 0,
+ modestbranding: true,
+ width: '1440px',
+ height: '810px'
+ }
+ }
+ };
+ setConfig(localConfig);
+ }, [autoplay, controls, loop, showTitle, showPortrait, showByline]);
+
+ return (
+ onLoaded(params)}
+ />
+ );
+};
+
+export default VideoPlayer;
diff --git a/messages/en.json b/messages/en.json
index ede0f7d17..1d6c309fa 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -193,6 +193,62 @@
"para008": "These are small steps, but we believe that these efforts will lead to the future.",
"para009": "One of our challenges is to become an “open brewery”. Our brewery is adjacent to an old private house on the same site and the restaurant of BYAKU Narai, an accommodation facility that was partially renovated from a former sake brewery. The brewery is separated from the restaurant by a single large glass partition, and we believe that this will provide an opportunity for visitors to experience the sake brewing process up close, which is usually difficult to see, and to develop an interest in sake.",
"para010": "Finally, the brand name “narai” was chosen with the hope that our sake will be a catalyst for people around the world to learn about and visit the charming inn town of Naraijuku. We would be happy if you could stop by suginomori brewery when you come to Narai."
+ },
+ "company": {
+ "title": "company",
+ "subtitle001": "information",
+ "name": {
+ "label": "company name",
+ "value": "suginomori brewery"
+ },
+ "director": {
+ "label": "ceo",
+ "value": "Kou Sundberg William"
+ },
+ "since": {
+ "label": "Founded",
+ "value": "1793"
+ },
+ "address": {
+ "label": "Address",
+ "value": "551-1 Narai, Shiojiri, Nagano, Japan 399-6303"
+ },
+ "telephone": {
+ "label": "Phone Number",
+ "value": "+81 264-24-0340"
+ },
+ "subtitle002": "our team",
+ "irie": {
+ "japanese": "入江将之",
+ "english": "Masayuki Irie",
+ "role": "杜氏"
+ },
+ "nishikawa": {
+ "japanese": "西川正貴",
+ "english": "Masataka Nishikawa",
+ "role": "番頭"
+ },
+ "sundberg": {
+ "japanese": "サンドバーグ弘",
+ "english": "Kou Sundberg",
+ "role": "蔵元"
+ },
+ "yamano": {
+ "japanese": "山野恭稔",
+ "english": "Takatoshi Yamano",
+ "role": "クリエイティブディレクター"
+ },
+ "yoshida": {
+ "japanese": "吉田有紗",
+ "english": "Alisa Yoshida",
+ "role": "PR・マーケティング"
+ },
+ "ikegaya": {
+ "japanese": "池谷晋也",
+ "english": "Shinya Ikegaya",
+ "role": "営業戦略"
+ },
+ "subtitle003": "movie"
}
}
}
diff --git a/messages/ja.json b/messages/ja.json
index a4353d19a..0957aad8a 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -193,6 +193,62 @@
"para008": "・・・小さなことの積み重ねですが、これらの取り組みが未来に繋がると信じています。",
"para009": "またこれらに関連し、私たちが挑戦したことの１つが、「開かれた酒蔵」としての在り方です。弊蔵は、同敷地内の古民家や、旧酒蔵の一部を改修した宿泊施設(BYAKU Narai)のレストランに隣接しています。大きなガラスの仕切り１枚で仕切られており、普段はなかなか見ることの出来ない酒造りを間近で感じられることは、日本酒に興味を持って頂くきっかけになると信じています。",
"para010": "最後に、ブランド名の【narai】は、「私たちのsakeをきっかけに、奈良井宿という魅力的な宿場町を世界の人に知ってもらい、足を運んで頂きたい」という想いを込めて名付けました。奈良井に来られる際には、suginomori breweryに立ち寄って頂けたら嬉しいです。"
+ },
+ "company": {
+ "title": "会社概要",
+ "subtitle001": "information",
+ "name": {
+ "label": "社名",
+ "value": "杉の森酒造株式会社"
+ },
+ "director": {
+ "label": "代表取締役",
+ "value": "サンドバーグ弘ウィリアム"
+ },
+ "since": {
+ "label": "創業",
+ "value": "1793年"
+ },
+ "address": {
+ "label": "所在地",
+ "value": "〒399-6303長野県塩尻市奈良井551-1"
+ },
+ "telephone": {
+ "label": "電話番号",
+ "value": "0264-24-0340"
+ },
+ "subtitle002": "our team",
+ "irie": {
+ "japanese": "入江将之",
+ "english": "Masayuki Irie",
+ "role": "杜氏"
+ },
+ "nishikawa": {
+ "japanese": "西川正貴",
+ "english": "Masataka Nishikawa",
+ "role": "番頭"
+ },
+ "sundberg": {
+ "japanese": "サンドバーグ弘",
+ "english": "Kou Sundberg",
+ "role": "蔵元"
+ },
+ "yamano": {
+ "japanese": "山野恭稔",
+ "english": "Takatoshi Yamano",
+ "role": "クリエイティブディレクター"
+ },
+ "yoshida": {
+ "japanese": "吉田有紗",
+ "english": "Alisa Yoshida",
+ "role": "PR・マーケティング"
+ },
+ "ikegaya": {
+ "japanese": "池谷晋也",
+ "english": "Shinya Ikegaya",
+ "role": "営業戦略"
+ },
+ "subtitle003": "movie"
}
}
}
diff --git a/package.json b/package.json
index ef162571a..2e9ff7d27 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
"prettier-plugin-organize-imports": "^3.2.3",
"react": "latest",
"react-dom": "latest",
- "react-intersection-observer": "^9.5.2"
+ "react-intersection-observer": "^9.5.2",
+ "react-player": "^2.12.0"
},
"devDependencies": {
"@tailwindcss/container-queries": "^0.1.1",
diff --git a/tailwind.config.js b/tailwind.config.js
index b6458a31d..7b5938c94 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,7 +18,8 @@ module.exports = {
japan: ['var(--font-noto)', 'serif']
},
aspectRatio: {
- tall: '596 / 845'
+ tall: '596 / 845',
+ video: '1792 / 750'
},
keyframes: {
fadeIn: {
diff --git a/yarn.lock b/yarn.lock
index 36b583ccd..c2b9ba9be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1314,6 +1314,7 @@ __metadata:
react: latest
react-dom: latest
react-intersection-observer: ^9.5.2
+ react-player: ^2.12.0
tailwindcss: ^3.3.3
typescript: 5.1.6
languageName: unknown
@@ -1404,6 +1405,13 @@ __metadata:
languageName: node
linkType: hard
+"deepmerge@npm:^4.0.0":
+ version: 4.3.1
+ resolution: "deepmerge@npm:4.3.1"
+ checksum: 2024c6a980a1b7128084170c4cf56b0fd58a63f2da1660dcfe977415f27b17dbe5888668b59d0b063753f3220719d5e400b7f113609489c90160bb9a5518d052
+ languageName: node
+ linkType: hard
+
"default-browser-id@npm:^3.0.0":
version: 3.0.0
resolution: "default-browser-id@npm:3.0.0"
@@ -3118,6 +3126,13 @@ __metadata:
languageName: node
linkType: hard
+"load-script@npm:^1.0.0":
+ version: 1.0.0
+ resolution: "load-script@npm:1.0.0"
+ checksum: 8458e3f07b4a86f8d9d66e47a987811491a5d013af23ba7b371c6d3c9dc899885b072ccf65abf7874c10cb197d4975eacd8a7a125bfb38dbbcb267539f5dc1e9
+ languageName: node
+ linkType: hard
+
"locate-path@npm:^5.0.0":
version: 5.0.0
resolution: "locate-path@npm:5.0.0"
@@ -3233,6 +3248,13 @@ __metadata:
languageName: node
linkType: hard
+"memoize-one@npm:^5.1.1":
+ version: 5.2.1
+ resolution: "memoize-one@npm:5.2.1"
+ checksum: a3cba7b824ebcf24cdfcd234aa7f86f3ad6394b8d9be4c96ff756dafb8b51c7f71320785fbc2304f1af48a0467cbbd2a409efc9333025700ed523f254cb52e3d
+ languageName: node
+ linkType: hard
+
"merge-stream@npm:^2.0.0":
version: 2.0.0
resolution: "merge-stream@npm:2.0.0"
@@ -4126,7 +4148,7 @@ __metadata:
languageName: node
linkType: hard
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -4163,6 +4185,13 @@ __metadata:
languageName: node
linkType: hard
+"react-fast-compare@npm:^3.0.1":
+ version: 3.2.2
+ resolution: "react-fast-compare@npm:3.2.2"
+ checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+ languageName: node
+ linkType: hard
+
"react-intersection-observer@npm:^9.5.2":
version: 9.5.2
resolution: "react-intersection-observer@npm:9.5.2"
@@ -4179,6 +4208,21 @@ __metadata:
languageName: node
linkType: hard
+"react-player@npm:^2.12.0":
+ version: 2.12.0
+ resolution: "react-player@npm:2.12.0"
+ dependencies:
+ deepmerge: ^4.0.0
+ load-script: ^1.0.0
+ memoize-one: ^5.1.1
+ prop-types: ^15.7.2
+ react-fast-compare: ^3.0.1
+ peerDependencies:
+ react: ">=16.6.0"
+ checksum: 77d3e55ed67cd9c1e2300a990d8015d270072daad41f8a0750c32748f3fbfbc5bd2a2f06e78ac6828c2260b84537b9571d0abac31d3e888b74a3dccb59a56365
+ languageName: node
+ linkType: hard
+
"react@npm:latest":
version: 18.2.0
resolution: "react@npm:18.2.0"