Version 3.6.8 (#73)

Author: tahoni

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Table of Contents
 
+- [Version 3.6.8](#version-368---2025-06-02)
 - [Version 3.6.7](#version-367---2025-06-01)
 - [Version 3.6.6](#version-366---2025-06-01)
 - [Version 3.6.5](#version-365---2025-05-15)
@@ -46,7 +47,20 @@
 - [Version 3.0.1](#version-301---2024-08-27)
 - [Version 3.0.0](#version-300---2024-08-18)
 
+### [Version 3.6.8](https://github.com/tahoni/hpsc-web-vite/releases/tag/version-3.6.8) - _2025-06-02_
+
+Added a YouTube video to the Frontier shooting range.
+
+#### Enhancements and Updates
+
+- Added an iframe with the YouTube video for the Frontier shooting range.
+
+#### Changes by
+
+@tahoni
+
 ### [Version 3.6.7](https://github.com/tahoni/hpsc-web-vite/releases/tag/version-3.6.7) - _2025-06-01_
+
 Added a link to the World Shoot 2025 apparel at Bosninja.
 Added an architecture README document.
 

RELEASE_NOTES.md

@@ -2,18 +2,13 @@
 
 ## Release Notes
 
-### Version 3.6.7 - _2025-06-01_
-Added a link to the World Shoot 2025 apparel at Bosninja.
-Added an architecture README document.
+### Version 3.6.8 - _2025-06-02_
 
-#### Enhancements and Updates
-
-- Added a link to the Bosninja IPSC Handgun World Shoot 2025 apparel for the 2025 World Shoot Handgun post.
-- Added the link to the Bosninja webpage to the constants.
+Added a YouTube video to the Frontier shooting range.
 
-#### Licence and Documentation
+#### Enhancements and Updates
 
-- Added an `ARCHITCTURE.md` file and copied the content of the `README.md` file there.
+- Added an iframe with the YouTube video for the Frontier shooting range.
 
 #### Changes by
 

src/components/Video/VideoProps.ts

@@ -0,0 +1,3 @@
+export interface VideoProps {
+  url: string;
+}

src/components/Video/YouTubeVideo.tsx

@@ -0,0 +1,19 @@
+import { VideoProps } from "./VideoProps";
+
+export interface YouTubeVideoProps extends VideoProps {}
+
+export const YouTubeVideo = (props: VideoProps) => {
+  return (
+    <iframe
+      // width={props.width ?? 560}
+      width="100%"
+      // height={props.height ?? 315}
+      height="100%"
+      src={props.url}
+      title="YouTube video player"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+    ></iframe>
+  );
+};

src/content/posts/Events/stories/WorldShoots/WorldShoot.module.scss

@@ -1,18 +1,27 @@
 $map-width: 100%;
 $map-height: 15em;
+$video-width: 36em;
+$video-height: 20em;
 
 :export {
-  maxWidth: $map-width;
+  mapWidth: $map-width;
   mapHeight: $map-height;
 }
 
 .worldShootSummary {
   margin-top: 0.75em;
 }
 
-.worldShootRangeMap {
+.worldShootRangeMap,
+.worldShootRangeVideo {
   margin: 0.75em 0;
-  padding: 0.75em auto;
+  padding: 0.75em 0;
+}
+
+.worldShootRangeVideo {
+  max-width: $video-width;
+  height: $video-height;
+  max-height: $video-height;
 }
 
 .worldShoot img {

src/content/posts/Events/stories/WorldShoots/WorldShootContent.tsx

@@ -5,6 +5,7 @@ import { VenueType } from "../../../../../model/Venue";
 import { VenueEvent } from "../../../../../model/VenueEvent";
 import { worldShootEvents } from "./WorldShootConstants";
 import classes from "./WorldShoot.module.scss";
+import { YouTubeVideo } from "../../../../../components/Video/YouTubeVideo";
 
 interface WorldShootContentProps {
   year: number;
@@ -69,6 +70,11 @@ const WorldShootContent = React.memo(
           {worldShootEvent.shootingRange?.city} in{" "}
           {worldShootEvent.shootingRange?.province}
         </h6>
+
+        <div className={classes.worldShootRangeVideo}>
+          <YouTubeVideo url="https://www.youtube.com/embed/COcWeS1XP-M?si=ax7D5KhwA4alKLaJ" />
+        </div>
+
         <div className={classes.worldShootRangeMap}>
           <SimpleVenueMap
             mapStyle={mapStyle}