go/sonr
1
0 Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-11-06 23:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(marketing): refactor marketing page components

Browse Source
This commit is contained in:
Prad Nukala committed 2024-10-24 10:31:40 -04:00
1 parent 7b5ee7b0ed
commit c8657022a2
10 files changed
+327 -118
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pkg/nebula/components/marketing/modals/intro_video_templ.go
+1 -1
View File
@@ -29,7 +29,7 @@ func IntroVideo() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\nsources: {\nmp4: &#39;https://cdn.devdojo.com/pines/videos/coast.mp4&#39;,\nwebm: &#39;https://cdn.devdojo.com/pines/videos/coast.webm&#39;,\nogg: &#39;https://cdn.devdojo.com/pines/videos/coast.ogg&#39;\n},\nplaying: false,\ncontrols: true,\nmuted: false,\nmuteForced: false,\nfullscreen: false,\nended: false,\nmouseleave: false,\nautoHideControlsDelay: 3000,\ncontrolsHideTimeout: null,\nposter: null,\nvideoDuration: 0,\ntimeDurationString: &#39;00:00&#39;,\ntimeElapsedString: &#39;00:00&#39;,\nshowTime: false,\nvolume: 1,\nvolumeBeforeMute: 1,\nvideoPlayerReady: false,\ntimelineSeek(e) {\ntime = this.formatTime(Math.round(e.target.value));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nmetaDataLoaded(event) {\nthis.videoDuration = event.target.duration;\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, this.videoDuration);\ntime = this.formatTime(Math.round(this.videoDuration));\nthis.timeDurationString = `${time.minutes}:${time.seconds}`;\nthis.showTime = true;\nthis.videoPlayerReady = true;\n},\ntogglePlay(e) {\nif (this.$refs.player.paused || this.$refs.player.ended) {\nthis.playing = true;\nthis.$refs.player.play();\n} else {\nthis.$refs.player.pause();\nthis.playing = false;\n}\n},\ntoggleMute(){\nthis.muted = !this.muted;\nthis.$refs.player.muted = this.muted;\nif(this.muted){\nthis.volumeBeforeMute = this.volume;\nthis.volume = 0;\n} else {\nthis.volume = this.volumeBeforeMute;\n}\n},\ntimeUpdatedInterval() {\nif (!this.$refs.videoProgress.getAttribute(&#39;max&#39;))\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, $refs.player.duration);\nthis.$refs.videoProgress.value = this.$refs.player.currentTime;\ntime = this.formatTime(Math.round(this.$refs.player.currentTime));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nupdateVolume(e) {\nthis.volume = e.target.value;\nthis.$refs.player.volume = this.volume;\nif(this.volume == 0){\nthis.muted = true;\n}\nif(this.muted &amp;&amp; this.volume &gt; 0){\nthis.muted = false;\n}\n},\ntimelineClicked(e) {\nrect = this.$refs.videoProgress.getBoundingClientRect();\npos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;\nthis.$refs.player.currentTime = pos * this.$refs.player.duration;\n},\nhandleFullscreen() {\nif (document.fullscreenElement !== null) {\n// The document is in fullscreen mode\ndocument.exitFullscreen();\n} else {\n// The document is not in fullscreen mode\nthis.$refs.videoContainer.requestFullscreen();\n}\n},\nmousemoveVideo() {\nif(this.playing){\nthis.resetControlsTimeout();\n} else {\nthis.controls=true;\nclearTimeout(this.controlsHideTimeout);\n}\n},\nvideoEnded() {\nthis.ended = true;\nthis.playing = false;\nthis.$refs.player.currentTime = 0;\n},\nresetControlsTimeout() {\nthis.controls = true;\nclearTimeout(this.controlsHideTimeout);\nlet that = this;\nthis.controlsHideTimeout = setTimeout(function(){\nthat.controls=false\n}, this.autoHideControlsDelay);\n},\nformatTime(timeInSeconds) {\nresult = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);\nreturn {\nminutes: result.substring(3, 5),\nseconds: result.substring(6, 8),\n};\n}\n}\" x-init=\"\nsupportsVideo = document.createElement(&#39;video&#39;).canPlayType;\nif (!supportsVideo) {\nalert(&#39;This browser does not support the video element&#39;);\n}\n$refs.player.load();\n// Hide the default player controls\n$refs.player.controls = false;\n$watch(&#39;playing&#39;, (value) =&gt; {\nif (value) {\nended = false;\ncontrolsHideTimeout = setTimeout(() =&gt; {\ncontrols = false;\n}, autoHideControlsDelay);\n} else {\nclearTimeout(controlsHideTimeout);\ncontrols = true;\n}\n});\nif (!document?.fullscreenEnabled) {\n$refs.fullscreenButton.style.display = &#39;none&#39;;\n}\ndocument.addEventListener(&#39;fullscreenchange&#39;, (e) =&gt; {\nfullscreen = !!document.fullscreenElement;\n});\n\" x-ref=\"videoContainer\" @mouseleave=\"mouseleave=true\" @mousemove=\"mousemoveVideo\" class=\"relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video\"><video x-ref=\"player\" @loadedmetadata=\"metaDataLoaded\" @timeupdate=\"timeUpdatedInterval\" @ended=\"videoEnded\" preload=\"metadata\" :poster=\"poster\" class=\"relative z-10 object-cover w-full h-full bg-black\" crossorigin=\"anonymous\"><source :src=\"sources.mp4\" type=\"video/mp4\"> <source :src=\"sources.webm\" type=\"video/webm\"> <source :src=\"sources.ogg\" type=\"video/ogg\"></video><div x-show=\"videoPlayerReady\" class=\"absolute inset-0 w-full h-full\"><div x-ref=\"videoBackground\" @click=\"togglePlay()\" class=\"absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group\"><div x-show=\"playing\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600Line truncated
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\nsources: {\nmp4: &#39;https://cdn.devdojo.com/pines/videos/coast.mp4&#39;,\nwebm: &#39;https://cdn.devdojo.com/pines/videos/coast.webm&#39;,\nogg: &#39;https://cdn.devdojo.com/pines/videos/coast.ogg&#39;\n},\nplaying: false,\ncontrols: true,\nmuted: false,\nmuteForced: false,\nfullscreen: false,\nended: false,\nmouseleave: false,\nautoHideControlsDelay: 3000,\ncontrolsHideTimeout: null,\nposter: null,\nvideoDuration: 0,\ntimeDurationString: &#39;00:00&#39;,\ntimeElapsedString: &#39;00:00&#39;,\nshowTime: false,\nvolume: 1,\nvolumeBeforeMute: 1,\nvideoPlayerReady: false,\ntimelineSeek(e) {\ntime = this.formatTime(Math.round(e.target.value));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nmetaDataLoaded(event) {\nthis.videoDuration = event.target.duration;\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, this.videoDuration);\ntime = this.formatTime(Math.round(this.videoDuration));\nthis.timeDurationString = `${time.minutes}:${time.seconds}`;\nthis.showTime = true;\nthis.videoPlayerReady = true;\n},\ntogglePlay(e) {\nif (this.$refs.player.paused || this.$refs.player.ended) {\nthis.playing = true;\nthis.$refs.player.play();\n} else {\nthis.$refs.player.pause();\nthis.playing = false;\n}\n},\ntoggleMute(){\nthis.muted = !this.muted;\nthis.$refs.player.muted = this.muted;\nif(this.muted){\nthis.volumeBeforeMute = this.volume;\nthis.volume = 0;\n} else {\nthis.volume = this.volumeBeforeMute;\n}\n},\ntimeUpdatedInterval() {\nif (!this.$refs.videoProgress.getAttribute(&#39;max&#39;))\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, $refs.player.duration);\nthis.$refs.videoProgress.value = this.$refs.player.currentTime;\ntime = this.formatTime(Math.round(this.$refs.player.currentTime));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nupdateVolume(e) {\nthis.volume = e.target.value;\nthis.$refs.player.volume = this.volume;\nif(this.volume == 0){\nthis.muted = true;\n}\nif(this.muted &amp;&amp; this.volume &gt; 0){\nthis.muted = false;\n}\n},\ntimelineClicked(e) {\nrect = this.$refs.videoProgress.getBoundingClientRect();\npos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;\nthis.$refs.player.currentTime = pos * this.$refs.player.duration;\n},\nhandleFullscreen() {\nif (document.fullscreenElement !== null) {\n// The document is in fullscreen mode\ndocument.exitFullscreen();\n} else {\n// The document is not in fullscreen mode\nthis.$refs.videoContainer.requestFullscreen();\n}\n},\nmousemoveVideo() {\nif(this.playing){\nthis.resetControlsTimeout();\n} else {\nthis.controls=true;\nclearTimeout(this.controlsHideTimeout);\n}\n},\nvideoEnded() {\nthis.ended = true;\nthis.playing = false;\nthis.$refs.player.currentTime = 0;\n},\nresetControlsTimeout() {\nthis.controls = true;\nclearTimeout(this.controlsHideTimeout);\nlet that = this;\nthis.controlsHideTimeout = setTimeout(function(){\nthat.controls=false\n}, this.autoHideControlsDelay);\n},\nformatTime(timeInSeconds) {\nresult = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);\nreturn {\nminutes: result.substring(3, 5),\nseconds: result.substring(6, 8),\n};\n}\n}\" x-data=\"introVideo\" x-ref=\"videoContainer\" @mouseleave=\"mouseleave=true\" @mousemove=\"mousemoveVideo\" class=\"relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video\"><video x-ref=\"player\" @loadedmetadata=\"metaDataLoaded\" @timeupdate=\"timeUpdatedInterval\" @ended=\"videoEnded\" preload=\"metadata\" :poster=\"poster\" class=\"relative z-10 object-cover w-full h-full bg-black\" crossorigin=\"anonymous\"><source :src=\"sources.mp4\" type=\"video/mp4\"> <source :src=\"sources.webm\" type=\"video/webm\"> <source :src=\"sources.ogg\" type=\"video/ogg\"></video><div x-show=\"videoPlayerReady\" class=\"absolute inset-0 w-full h-full\"><div x-ref=\"videoBackground\" @click=\"togglePlay()\" class=\"absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group\"><div x-show=\"playing\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20\" x-cloak><svg class=\"w-10 h-10 translate-x-0.5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z\" fill=\"currentColor\"></path></svg></div><div x-show=\"!playing &amp;&amp; !ended\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-bluLine truncated
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}