mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Merge branch 'master' into develop
This commit is contained in:
Sam Carlton
commit
9b6a7d91c4
7 changed files with 302 additions and 60 deletions
15
README.md
15
README.md
|
|
@ -41,7 +41,7 @@ Any comments, suggestions? [Let us know!](https://github.com/ThatGuySam/doesitar
|
|||
* [Adobe XD](https://www.adobe.com/products/xd.html) - ✳️ Yes, works via Rosetta 2 - [Official Adobe Status Page](https://helpx.adobe.com/download-install/kb/apple-silicon-m1-chip.html)
|
||||
* [Alacritty](https://github.com/alacritty/alacritty/releases) - ✳️ Yes, works via Rosetta 2 Translation - [Verification](https://github.com/ThatGuySam/doesitarm/issues/600#issue-834311784)
|
||||
* [Anaconda](https://www.anaconda.com/products/individual#Downloads) - ✳️ Yes, works via Rosetta 2 - [Verification](https://github.com/ThatGuySam/doesitarm/issues/123)
|
||||
* [Android Studio](https://developer.android.com/studio) - ✳️ Yes, works via Rosetta 2, emulator only available as preview. - [Source](https://github.com/ThatGuySam/doesitarm/issues/48#issuecomment-732143252) [Emulator Issue](https://issuetracker.google.com/issues/173624439) [Emulator Preview Download](https://github.com/741g/android-emulator-m1-preview/releases)
|
||||
* [Android Studio](https://developer.android.com/studio) - ✳️ Yes, works via Rosetta 2 with native support in preview. - [Source](https://github.com/ThatGuySam/doesitarm/issues/48#issuecomment-732143252) [Native Preview](https://androidstudio.googleblog.com/2021/04/android-studio-arctic-fox-canary-15.html)
|
||||
* [Apache Maven](https://maven.apache.org/download.cgi) - ✳️ Yes, works via Rosetta 2 - [Verification](https://github.com/ThatGuySam/doesitarm/issues/215#issuecomment-742910724)
|
||||
* [Apple Transporter](https://apps.apple.com/app/transporter/id1450874784?mt=12) - ✅ Yes, Full Native Apple Silicon Support as of v1.2.1
|
||||
* [App Preview Video Converter](https://apps.apple.com/us/app/app-preview-video-converter/id1137451860) - ✅ Yes, full native support as of v1.7.4 - [Release Notes](https://www.bridgetech.io)
|
||||
|
|
@ -86,7 +86,7 @@ Any comments, suggestions? [Let us know!](https://github.com/ThatGuySam/doesitar
|
|||
* [Godot Engine](https://godotengine.org/download/osx) - ✅ Yes, Full Native Apple Silicon Support as of v3.3 - [Release Notes](https://godotengine.org/article/godot-3-3-has-arrived#macos)
|
||||
* [GNU Compiler Collection](https://gcc.gnu.org/) - ✳️ Yes, runs via Rosetta 2 - [Source](https://github.com/ThatGuySam/doesitarm/issues/105#issuecomment-732795155) [Bugzilla Issue](https://gcc.gnu.org/bugzilla/show_bug.cgi?id=96168)
|
||||
* [hadolint](https://github.com/hadolint/hadolint) - ✳️ Yes, works via Rosetta 2 - [Report #1](https://github.com/Homebrew/brew/issues/10744#issuecomment-787498421)
|
||||
* [Haskell](https://www.haskell.org/platform/mac.html) - ✅ Yes, Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/73#issuecomment-826065143)
|
||||
* [Haskell](https://www.haskell.org/platform/mac.html) - ✳️ Yes, runs via Rosetta 2 translation - [Verification](https://github.com/ThatGuySam/doesitarm/issues/73#issuecomment-826065143)
|
||||
* [Hex Fiend](https://github.com/HexFiend/HexFiend/releases) - ✅ Yes, full native support as of v2.14.0 - [Source](https://github.com/ThatGuySam/doesitarm/issues/429)
|
||||
* [Homebrew](https://brew.sh/) - ✅ Yes, fully supported as of v3.0.0 - [Release Notes](https://brew.sh/2021/02/05/homebrew-3.0.0/).
|
||||
* [Hopper Disassembler](https://www.hopperapp.com/download.html) - ✅ Yes, Full Native Apple Silicon Support as of v4.6 - [Release Notes](https://www.hopperapp.com/blog/?p=263)
|
||||
|
|
@ -212,7 +212,7 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [Fretello](https://apps.apple.com/us/app/fretello-guitar-lessons/id1107957482) - ✅ Yes, Full Native Apple Silicon Support as of v2.3.3 - [App Store Story](https://apps.apple.com/us/story/id1540024103)
|
||||
* [Garageband](https://www.apple.com/mac/garageband/) - ✅ Yes, it was shown at the November 10th event - [Apple Nov 10 Event](https://youtu.be/5AwdkGKmZ0I?t=1033)
|
||||
* [Logic Pro](https://www.apple.com/logic-pro/) - ✅ Yes, it was shown at the November 10th event - [Apple Nov 10 Event](https://youtu.be/5AwdkGKmZ0I?t=1037)
|
||||
* [Native Access](https://www.native-instruments.com/en/specials/native-access/) - ⏹ No, not working at all but support is in development - [Official Status](https://support.native-instruments.com/hc/en-us/articles/360013515618-macOS-11-Big-Sur-Compatibility-News) [Official Post](https://support.native-instruments.com/hc/en-us/articles/360014683497)
|
||||
* [Native Access](https://www.native-instruments.com/en/specials/native-access/) - ✳️ Yes, works via Rosetta 2 translation with the exception of MASSIVE X - [Official Status](https://support.native-instruments.com/hc/en-us/articles/360013515618-macOS-11-Big-Sur-Compatibility-News) [Official Post](https://support.native-instruments.com/hc/en-us/articles/360014683497)
|
||||
* [n-Track Studio](https://ntrack.com/download.php) - 🚫 Not yet supported only works on Intel-based Macs - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/c/2708043/354737/5114)
|
||||
* [Piezo](https://rogueamoeba.com/piezo/) - ✅ Yes, Initial Native Apple Silicon Support as of v1.7.0 - [Release Notes](https://rogueamoeba.com/piezo/releasenotes.php) [Official Post](https://weblog.rogueamoeba.com/2020/11/16/rogue-amoeba-software-updates-for-macos-11-big-sur-and-m1-chip-based-macs/)
|
||||
* [Plogue Bidule](https://plogue.com/downloads.html) - ✅ Yes, Full Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/480#issue-776226694)
|
||||
|
|
@ -342,7 +342,8 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [AutoCAD](https://www.autodesk.com/products/autocad/overview?plc=ACDIST&term=1-YEAR&support=ADVANCED&quantity=1) - ✳️ Yes, works via Rosetta 2 - [Verification](https://github.com/ThatGuySam/doesitarm/issues/499#issuecomment-754202196) [AutoDesk Forums](https://forums.autodesk.com/t5/autocad-for-mac-forum/apple-silicon/m-p/9652836)
|
||||
* [CADintosh](https://www.lemkesoft.de/en/products/cadintosh/download/) - ✅ Yes, Full Native Apple Silicon Support - [🧪 Apple Silicon App Tested](https://doesitarm.com/apple-silicon-app-test/)
|
||||
* [PrusaSlicer](https://www.prusa3d.com/prusaslicer/) - ✅ Yes, Full Native Apple Silicon Support as of v2.3.1 - [Release Notes](https://github.com/prusa3d/PrusaSlicer/releases/tag/version_2.3.1)
|
||||
* [Rhinoceros 3D](https://www.rhino3d.com/download/) - 🚫 No, not yet supported only works on Intel-based Macs - [Developer Article](https://discourse.mcneel.com/t/apple-silicon-and-rhino-for-mac-the-work-continues/113164)
|
||||
* [Redshift](https://www.redshift3d.com/demo) - ✅ Yes, Full Native Apple Silicon Support - [Press Release](https://www.businesswire.com/news/home/20210413005903/en/Maxon-Announces-Redshift-for-macOS-Including-Native-Support-for-M1-Powered-Macs)
|
||||
* [Rhinoceros 3D](https://www.rhino3d.com/download/) - ✳️ Yes, works via Rosetta 2 translation - [Developer Article](https://discourse.mcneel.com/t/apple-silicon-and-rhino-for-mac-the-work-continues/113164) [Known Bugs](https://mcneel.myjetbrains.com/youtrack/issues?q=project:%20RH%20tag:%20%7BApple%20Silicon%7D%20%23unresolved)
|
||||
* [Shaper3D](https://www.shapr3d.com/) - ✅ Yes, it was shown at the November 10th event - [Apple Nov 10 Event](https://youtu.be/5AwdkGKmZ0I?t=2211)
|
||||
* [SketchUp](https://www.sketchup.com/) - ✳️ Yes, works via Rosetta 2 - [Discussion](https://forums.sketchup.com/t/the-new-m1-processor/141946)
|
||||
* [SOLIDWORKS](https://www.solidworks.com/sw/support/downloads.htm) - ✳️ Yes, works via Parallels Virtualization - [Working on Parallels](https://www.parallels.com/blogs/solidworks-for-mac/)
|
||||
|
|
@ -408,6 +409,7 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [Google Drive for desktop](https://support.google.com/drive/answer/7329379#zippy=%2Cdownload-install-drive-file-stream) - 🚫 No, not yet but native support is in beta - [Official Status](https://support.google.com/a/answer/7491144?utm_medium=et&utm_source=aboutdrive&utm_content=getstarted&utm_campaign=en_us&hl=en#:~:text=Drive%20File%20Stream%20does%20not%20yet%20support%20Apple%20M1%20devices) [Apple Silicon Beta Info](https://support.google.com/a/answer/7577057?hl=en)
|
||||
* [Grapefruit for Mac](https://haveagrapefruit.com/) - ✳️ Yes, works via Rosetta 2 translation - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/grapefruit)
|
||||
* [Harvest for Mac](https://www.getharvest.com/apps/mac) - ✅ Yes, Full Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/604#issue-835321721)
|
||||
* [HCL Notes](https://www.hcltechsw.com/products/nd) - 🔶 Unknown, more info needed - [Discussion](https://domino-ideas.hcltechsw.com/ideas/NTS-I-1496)
|
||||
* [Highland 2](https://quoteunquoteapps.com/highland-2/) - ✅ Yes, Full Native Apple Silicon Support as of v2.9 - [App Store Story](https://apps.apple.com/us/story/id1540024103)
|
||||
* [Highlights for Mac](https://highlightsapp.net/) - ✅ Yes, Full Native Apple Silicon Support as of v2020.3 - [Official Blog](https://highlightsapp.net/blog/2020/11/12/Time-for-change/)
|
||||
* [IA Writer](https://apps.apple.com/us/app/ia-writer/id775737172) - ✅ Yes, Full Native Apple Silicon Support - [Official Twitter](https://twitter.com/iawriter/status/1326284671005696009?s=21)
|
||||
|
|
@ -509,6 +511,7 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
#### Entertainment and Media Apps
|
||||
|
||||
* [2048 Game](https://apps.apple.com/us/app/2048-game/id871033113?mt=12) - ✅ Yes, Full Native Apple Silicon Support - [🧪 Apple Silicon App Tested](https://doesitarm.com/apple-silicon-app-test/)
|
||||
* [Amazon Music](https://music.amazon.com/NA/help/apps) - ✳️ Yes, works via Rosetta 2 translation - [Verification](https://github.com/ThatGuySam/doesitarm/issues/634#issue-870540625)
|
||||
* [Celeste](http://www.celestegame.com/) - ⏹ No, not yet but can be made to run with a work around - [Apple Silicon Work Around](https://github.com/AbeJellinek/celeste-on-m1) [View on Itch.io](https://mattmakesgames.itch.io/celeste?ac=QWRPsg4sVvG)
|
||||
* [Cog Player](https://cog.losno.co/download) - ✅ Yes, Full Native Apple Silicon Support - [🧪 Apple Silicon App Tested](https://doesitarm.com/apple-silicon-app-test/)
|
||||
* [DeSmuME](https://desmume.org/download/) - ✳️ Yes, works via Rosetta 2 Translation - [Verification](https://github.com/ThatGuySam/doesitarm/issues/611#issue-840038939)
|
||||
|
|
@ -563,6 +566,7 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [Skype](https://www.skype.com/en/get-skype/) - ✳️ Yes, works via Rosetta 2 - [Video](https://doesitarm.com/tv/the-new-m1-macbook-running-microsoft-office-business-apps-teams-skype-excel-cpu-and-ram-usage-i-ibseaue3se8/)
|
||||
* [Skype for Business](https://www.microsoft.com/en-us/microsoft-365/skype-for-business/download-app) - ✳️ Yes, works via Rosetta 2 - [Video](https://doesitarm.com/tv/the-new-m1-macbook-running-microsoft-office-business-apps-teams-skype-excel-cpu-and-ram-usage-i-ibseaue3se8/)
|
||||
* [Slack](https://slack.com/) - ✅ Yes, Full Native Apple Silicon Support as of 4.13.0 - [Release Notes](https://slack.com/intl/en-au/release-notes/mac)
|
||||
* [Spark Mail](https://apps.apple.com/app/apple-store/id1176895641) - ✳️ Yes, works via Rosetta 2 translation - [Verification](https://github.com/ThatGuySam/doesitarm/issues/636#issue-874037794)
|
||||
* [Telegram](https://macos.telegram.org/) - ✅ Yes, Full Native Apple Silicon Support as of 7.2.4 - [GitHub issue](https://github.com/ThatGuySam/doesitarm/issues/52) [Changelog](https://macos.telegram.org/#v7-2-4-2020-11-29)
|
||||
* [Twitter](https://apps.apple.com/app/twitter/id1482454543?mt=12) - ✅ Yes, Full Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/580#issue-816729668)
|
||||
* [Unite for Mac](https://www.bzgapps.com/unite) - ✳️ Runs via Rosetta with native support currently in development - [Verification](https://github.com/ThatGuySam/doesitarm/issues/606#issuecomment-803009445) [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/unite)
|
||||
|
|
@ -594,10 +598,12 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [Little Snitch](https://www.obdev.at/products/littlesnitch/index.html) - ✅ Yes, Full Native Apple Silicon Support from 5.0 - [Release notes](https://www.obdev.at/products/littlesnitch/releasenotes.html)
|
||||
* [Mullvad VPN](https://mullvad.net/en/download/macos/) - ✳️ Yes, works via Rosetta 2 - [Verification](https://github.com/ThatGuySam/doesitarm/issues/566#issue-808856204)
|
||||
* [NordVPN](https://nordvpn.com/download/nordvpn-site/) - ✳️ Yes, works via Rosetta 2 - [Source](https://github.com/ThatGuySam/doesitarm/issues/317#issuecomment-736876490)
|
||||
* [ProtonVPN](https://protonvpn.com/download-macos) - ✳️ Yes, works via Rosetta 2 translation - [Report #1](https://forums.macrumors.com/threads/vpn-software.2270086/post-29435392) [Report #2](https://forums.macrumors.com/threads/vpn-software.2270086/post-29294735)
|
||||
* [SecKey](https://lighthouse16.com/seckey/) - ✅ Yes, fully supported as of v1.3.3 - [Source](https://lighthouse16.com/journal/apple-silicon-support/)
|
||||
* [Secrets for Mac](https://apps.apple.com/app/secrets/id973049011?mt=12) - ✅ Yes, Full Native Apple Silicon Support as of v3.4.0 - [Official Post](https://outercorner.com/blog/2020/11/password-autofill-now-on-macos-big-sur/) [View on Setapp](https://setapp.sjv.io/c/2708043/442278/5114)
|
||||
* [Shimo](https://www.shimovpn.com/en/) - ✳️ Yes, works via Rosetta 2 translation - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/shimo)
|
||||
* [Step Two for Mac](https://steptwo.app/) - ✅ Yes, Full Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/619#issue-849584485) [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/c/2708043/766955/5114)
|
||||
* [Surfshark](https://surfshark.com/download/macos) - ✅ Yes, Native Apple Silicon Support as of v3.4.0 - [Press Release](https://surfshark.com/blog/m1-chip-compatibility)
|
||||
* [Tor Browser](https://www.torproject.org/download/) - ✳️ Yes, works via Rosetta 2 translation - [Release Notes](https://blog.torproject.org/new-release-tor-browser-1008) [Source](https://github.com/ThatGuySam/doesitarm/issues/436) [Issue tracker for tab crashes](https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/40262)
|
||||
* [VeraCrypt](https://www.veracrypt.fr/en/Downloads.html) - ✳️ Yes, works via Rosetta 2 as of 1.24-Update8 - [GitHub issue](https://github.com/ThatGuySam/doesitarm/issues/355)
|
||||
* [Vivaldi](https://vivaldi.com/download/) - ✅ Yes, native support as of v3.7 - [Source](https://vivaldi.com/blog/vivaldi-fires-up-performance-2/)
|
||||
|
|
@ -669,6 +675,7 @@ Builds - [Java on M1 Benchmarks](https://docs.google.com/spreadsheets/d/1g4U7LAI
|
|||
* [Rectangle for Mac](https://rectangleapp.com/) - ✅ Yes, Full Native Apple Silicon Support - [🧪 Apple Silicon App Tested](https://doesitarm.com/apple-silicon-app-test/)
|
||||
* [restic](https://restic.net/) - ✅ Yes, Full Native Apple Silicon Support - [Verification](https://github.com/ThatGuySam/doesitarm/issues/492#issuecomment-754580871)
|
||||
* [Rocket for Mac](https://matthewpalmer.net/rocket/) - ✅ Yes, Full Native Apple Silicon Support - [Verifcation](https://github.com/ThatGuySam/doesitarm/issues/605#issue-835338120)
|
||||
* [SheepShaver](https://www.emaculation.com/forum/viewtopic.php?f=20&t=7360) - ✅ Yes, Full Native Apple Silicon Support - [Release Notes](https://www.emaculation.com/sheepshaver/build-history.txt) [🧪 Apple Silicon App Tested](https://doesitarm.com/apple-silicon-app-test/)
|
||||
* [Silenz](https://silenzapp.com/) - ✅ Yes, Full Native Apple Silicon Support - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/c/2708043/653749/5114)
|
||||
* [start for Mac](https://apps.apple.com/us/app/start/id1329701389?mt=12) - ✅ Yes, Full Native Apple Silicon Support - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/c/2708043/752736/5114)
|
||||
* [Swish for macOS](https://highlyopinionated.co/swish/) - ✅ Yes, Full Native Apple Silicon Support as of v1.7.1 - [Article](https://setapp.sjv.io/apple-silicon-supported-apps) [View on Setapp](https://setapp.sjv.io/swish)
|
||||
|
|
|
|||
|
|
@ -143,9 +143,9 @@
|
|||
'underline px-3 py-2 rounded-md text-xs font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
|
||||
//($nuxt.$route.path === item.url) ? 'text-white bg-darker hover:text-white neumorphic-shadow' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
|
||||
]"
|
||||
href="https://prf.hn/l/7JG0bEj"
|
||||
href="https://amzn.to/334Oyu6"
|
||||
>
|
||||
✅ Parallels is now fully native!
|
||||
🖥 M1 iMac is now available for preorder
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,21 +9,75 @@
|
|||
class="video-canvas w-screen flex flex-col justify-center items-center bg-black"
|
||||
>
|
||||
<div class="ratio-wrapper w-full max-w-4xl">
|
||||
<div class="relative overflow-hidden w-full pb-16/9">
|
||||
<div
|
||||
class="relative overflow-hidden w-full pb-16/9"
|
||||
@pointerover.once="warmConnections()"
|
||||
>
|
||||
<div
|
||||
v-if="playerLoaded === false"
|
||||
class="player-poster cursor-pointer"
|
||||
@click="startPlayerLoad()"
|
||||
>
|
||||
<picture
|
||||
class=""
|
||||
>
|
||||
<source
|
||||
v-for="(source, key) in posterSources"
|
||||
:key="key"
|
||||
:sizes="source.sizes"
|
||||
:data-srcset="source.srcset"
|
||||
:type="`image/${ key }`"
|
||||
>
|
||||
<img
|
||||
:data-src="video.thumbnail.src"
|
||||
:alt="video.name"
|
||||
class="absolute inset-0 h-full w-full object-cover lazyload"
|
||||
>
|
||||
</picture>
|
||||
<div
|
||||
class="video-card-overlay absolute inset-0 flex justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
|
||||
style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);"
|
||||
>
|
||||
<div class="play-circle w-16 h-16 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
|
||||
<svg
|
||||
viewBox="0 0 18 18"
|
||||
style="width:18px;height:18px;margin-left:3px"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe
|
||||
v-else
|
||||
ref="frame"
|
||||
:id="frameId"
|
||||
:src="`https://www.youtube-nocookie.com/embed/${video.id}?enablejsapi=1&autoplay=1&modestbranding=1&playsinline=1`"
|
||||
class="absolute h-full w-full"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <pre>
|
||||
hasPlayer: {{ hasPlayer }}
|
||||
</pre> -->
|
||||
|
||||
<!-- <pre>
|
||||
player: {{ player }}
|
||||
</pre> -->
|
||||
|
||||
<!-- <pre>
|
||||
timstamps: {{ video.timestamps }}
|
||||
</pre> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasTimestamps && hasPlayer"
|
||||
v-if="hasTimestamps"
|
||||
class="video-timestamps w-full max-w-4xl"
|
||||
>
|
||||
<div
|
||||
|
|
@ -43,7 +97,7 @@
|
|||
:class-groups="{
|
||||
shadow: 'neumorphic-shadow-inner'
|
||||
}"
|
||||
@click.stop="seekTo(timestamp.inSeconds); player.playVideo()"
|
||||
@click.stop="seekTo(timestamp.inSeconds)"
|
||||
>{{ timestamp.fullText }}</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -54,6 +108,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import 'lazysizes'
|
||||
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -68,13 +124,27 @@ export default {
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
playerLoaded: false,
|
||||
player: null,
|
||||
playing: false,
|
||||
progressInterval: null,
|
||||
playerTime: 0
|
||||
playerTime: 0,
|
||||
preconnected: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
posterSources () {
|
||||
const webpSource = {
|
||||
...this.video.thumbnail,
|
||||
srcset: this.video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp')
|
||||
}
|
||||
|
||||
return {
|
||||
webp: webpSource,
|
||||
jpeg: this.video.thumbnail
|
||||
}
|
||||
},
|
||||
|
||||
frameId () {
|
||||
return `youtube-player-${this.video.id}-${this._uid}`
|
||||
},
|
||||
|
|
@ -149,7 +219,14 @@ export default {
|
|||
// Set frame ID here so that it's the same when Youtube API looks for it
|
||||
// this.frameId = `youtube-bg-${this._uid}`
|
||||
|
||||
this.initializePlayer()
|
||||
this.detectAutoplay()
|
||||
.then( ({ willAutoplay }) => {
|
||||
// If we're allowed to autoplay
|
||||
// then start loading the player
|
||||
if ( willAutoplay === true ) {
|
||||
this.startPlayerLoad()
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
scrollRow ( timestamp ) {
|
||||
|
|
@ -166,21 +243,97 @@ export default {
|
|||
|
||||
timestampsScroller.scroll({ left: newScrollPosition, behavior: 'smooth' })
|
||||
},
|
||||
seekTo (timestampInSeconds) {
|
||||
|
||||
async detectAutoplay () {
|
||||
|
||||
if ( !process.client ) return { willAutoplay: false }
|
||||
|
||||
const { default: canAutoPlay } = await import('can-autoplay')
|
||||
|
||||
const willAutoplay = await canAutoPlay.video()
|
||||
// const willAutoplayMuted = await canAutoPlay.video({ muted: true, inline: true })
|
||||
|
||||
return {
|
||||
willAutoplay: willAutoplay.result
|
||||
}
|
||||
},
|
||||
|
||||
async seekTo (timestampInSeconds) {
|
||||
|
||||
if (this.playerLoaded === false) {
|
||||
await this.startPlayerLoad()
|
||||
}
|
||||
|
||||
this.player.seekTo(timestampInSeconds)
|
||||
},
|
||||
|
||||
// async playVideo() {
|
||||
|
||||
// if (this.playerLoaded === false) {
|
||||
// await this.startPlayerLoad()
|
||||
// }
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// // console.log('this.player', JSON.stringify(this.player))
|
||||
// this.player.playVideo()
|
||||
// })
|
||||
// },
|
||||
|
||||
addPrefetch(kind, url, as) {
|
||||
// console.log('prefetching', url)
|
||||
|
||||
const linkEl = document.createElement('link')
|
||||
|
||||
linkEl.rel = kind
|
||||
linkEl.href = url
|
||||
|
||||
if (as) {
|
||||
linkEl.as = as;
|
||||
}
|
||||
|
||||
document.head.append(linkEl)
|
||||
},
|
||||
|
||||
warmConnections() {
|
||||
if (this.preconnected) return
|
||||
|
||||
// The iframe document and most of its subresources come right off youtube.com
|
||||
this.addPrefetch('preconnect', 'https://www.youtube-nocookie.com')
|
||||
// The botguard script is fetched off from google.com
|
||||
this.addPrefetch('preconnect', 'https://www.google.com')
|
||||
|
||||
// Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
|
||||
this.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net')
|
||||
this.addPrefetch('preconnect', 'https://static.doubleclick.net')
|
||||
|
||||
this.preconnected = true
|
||||
},
|
||||
|
||||
async startPlayerLoad () {
|
||||
this.playerLoaded = true
|
||||
|
||||
await this.initializePlayer()
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// this.initializePlayer()
|
||||
// })
|
||||
},
|
||||
|
||||
async initializePlayer () {
|
||||
// console.log('Youtube Embed API Ready')
|
||||
|
||||
// Clear player
|
||||
this.player = null
|
||||
|
||||
// Clear tprogession interval
|
||||
// Clear progession interval
|
||||
clearInterval(this.progressInterval)
|
||||
|
||||
// If there are no timestamps
|
||||
// then stop
|
||||
if (!this.hasTimestamps) return
|
||||
if (!this.hasTimestamps) {
|
||||
this.playerLoaded = true
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof YT === 'undefined') {
|
||||
await this.initializeApi()
|
||||
|
|
@ -204,18 +357,30 @@ export default {
|
|||
// console.log('frame', this.$refs['frame'])
|
||||
// console.log('frame id', this.$refs['frame'].id)
|
||||
|
||||
this.player = new YT.Player(this.$refs['frame'].id, {
|
||||
events: {
|
||||
'onReady': this.onPlayerReady,
|
||||
'onStateChange': event => {
|
||||
// console.log('state changed', event)
|
||||
const onReady = () => new Promise( resolve => {
|
||||
|
||||
const stateHandler = stateHandlers[String(event.data)]
|
||||
// console.log('stateHandler', stateHandler)
|
||||
stateHandler(event)
|
||||
this.player = new YT.Player(this.$refs['frame'].id, {
|
||||
events: {
|
||||
'onReady': readyEvent => {
|
||||
this.onPlayerReady( readyEvent )
|
||||
|
||||
resolve( readyEvent )
|
||||
},
|
||||
'onStateChange': event => {
|
||||
// console.log('state changed', event)
|
||||
|
||||
const stateHandler = stateHandlers[String(event.data)]
|
||||
// console.log('stateHandler', stateHandler)
|
||||
stateHandler(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
await onReady()
|
||||
|
||||
// console.log('Youtube Player API ready', JSON.stringify(this.player))
|
||||
},
|
||||
initializeApi () {
|
||||
return new Promise( resolve => {
|
||||
|
|
@ -257,7 +422,7 @@ export default {
|
|||
clearInterval(this.progressInterval)
|
||||
},
|
||||
onPlayerReady (event) {
|
||||
console.log('Player is ready', this.player)
|
||||
console.log('Player is ready', event, this.player )
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -13,6 +13,7 @@
|
|||
"@open-wc/webpack-import-meta-loader": "^0.4.7",
|
||||
"@zip.js/zip.js": "^2.2.6",
|
||||
"axios": "^0.21.0",
|
||||
"can-autoplay": "^3.0.0",
|
||||
"chance": "^1.1.7",
|
||||
"cross-env": "^5.2.0",
|
||||
"jsdom": "^16.4.0",
|
||||
|
|
@ -4733,6 +4734,11 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/can-autoplay": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/can-autoplay/-/can-autoplay-3.0.0.tgz",
|
||||
"integrity": "sha512-qQXGGYPWgF8nPjEt305o3TJ/BkN15l6/wG+VU4N93YYXD3OtYkBBx+l5un7ihIk2UU1OLytAVJjW7ZR39j/CAQ=="
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
|
|
@ -29125,6 +29131,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"can-autoplay": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/can-autoplay/-/can-autoplay-3.0.0.tgz",
|
||||
"integrity": "sha512-qQXGGYPWgF8nPjEt305o3TJ/BkN15l6/wG+VU4N93YYXD3OtYkBBx+l5un7ihIk2UU1OLytAVJjW7ZR39j/CAQ=="
|
||||
},
|
||||
"caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@open-wc/webpack-import-meta-loader": "^0.4.7",
|
||||
"@zip.js/zip.js": "^2.2.6",
|
||||
"axios": "^0.21.0",
|
||||
"can-autoplay": "^3.0.0",
|
||||
"chance": "^1.1.7",
|
||||
"cross-env": "^5.2.0",
|
||||
"jsdom": "^16.4.0",
|
||||
|
|
|
|||
|
|
@ -107,33 +107,36 @@ export default {
|
|||
VideoPlayer,
|
||||
ChannelCredit
|
||||
},
|
||||
asyncData ({ params: { slug }, payload: { app, allVideos, submitVideoCard } }) {
|
||||
async asyncData ( data ) {
|
||||
|
||||
// const { allVideoAppsList } = await import('~/helpers/get-list.js')
|
||||
// // const { default: videoList } = await import('~/static/video-list.json')
|
||||
const {
|
||||
params: { slug },
|
||||
route
|
||||
} = data
|
||||
|
||||
// const { videosRelatedToApp } = await import('~/helpers/related.js')
|
||||
let {
|
||||
payload
|
||||
} = data
|
||||
|
||||
// const app = allVideoAppsList.find(app => (app.slug === slug))
|
||||
|
||||
// const submitVideoCard = {
|
||||
// endpoint: `https://docs.google.com/forms/d/e/1FAIpQLSeEVGM9vE7VcfLMy6fJkfU70X2VZ60rHDyhDQLtnAN4nso0WA/viewform?usp=pp_url&entry.1018125313=${app.name}`
|
||||
|
||||
// Manually get payload as fallback
|
||||
// Uncomment for dev
|
||||
// if ( payload === undefined ) {
|
||||
// // Read back the JSON we just wrote to ensure it exists
|
||||
// const { default: savedList } = await import('~/static/nuxt-endpoints.json')
|
||||
|
||||
// const endpoint = savedList.find( resource => {
|
||||
// return resource.route === route.path
|
||||
// } )
|
||||
|
||||
// payload = endpoint.payload
|
||||
// }
|
||||
|
||||
// // const featuredApps = []
|
||||
|
||||
// const relatedVideos = videosRelatedToApp( app ).map(video => {
|
||||
// // console.log('video', video)
|
||||
// return {
|
||||
// ...video,
|
||||
// // endpoint: `#${video.id}`
|
||||
// }
|
||||
// })
|
||||
|
||||
return {
|
||||
app,
|
||||
allVideos,
|
||||
submitVideoCard
|
||||
app: payload.app,
|
||||
allVideos: payload.allVideos,
|
||||
submitVideoCard: payload.submitVideoCard
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
|
|
|
|||
|
|
@ -78,6 +78,44 @@ import VideoRow from '~/components/video/row.vue'
|
|||
import VideoPlayer from '~/components/video/player.vue'
|
||||
import ChannelCredit from '~/components/video/channel-credit.vue'
|
||||
|
||||
|
||||
function makeFeaturedAppsString ( featuredApps ) {
|
||||
return featuredApps.slice(0, 5).map(app => app.name).join(', ')
|
||||
}
|
||||
|
||||
|
||||
function buildVideoStructuredData ( video, featuredApps ) {
|
||||
// console.log('video', video)
|
||||
|
||||
const thumbnailUrls = video.thumbnail.srcset.split(',').map( srcSetImage => {
|
||||
const [ imageUrl ] = srcSetImage.split(' ')
|
||||
|
||||
return imageUrl
|
||||
})
|
||||
|
||||
const featuredAppsString = makeFeaturedAppsString( featuredApps )
|
||||
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
// https://developers.google.com/search/docs/data-types/video
|
||||
// https://schema.org/VideoObject
|
||||
"@type": "VideoObject",
|
||||
"name": video.name,
|
||||
"description": `Includes the following apps: ${featuredAppsString}`,
|
||||
"thumbnailUrl": thumbnailUrls,
|
||||
// https://en.wikipedia.org/wiki/ISO_8601
|
||||
"uploadDate": video.lastUpdated.raw,
|
||||
// "duration": "PT1M54S", // Need to updaet Youtube API Request for this
|
||||
// "contentUrl": "https://www.example.com/video/123/file.mp4",
|
||||
// "embedUrl": "https://www.example.com/embed/123",
|
||||
// "interactionStatistic": {
|
||||
// "@type": "InteractionCounter",
|
||||
// "interactionType": { "@type": "http://schema.org/WatchAction" },
|
||||
// "userInteractionCount": 5647018
|
||||
// },
|
||||
// "regionsAllowed": "US,NL"
|
||||
}
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
LinkButton,
|
||||
|
|
@ -86,19 +124,32 @@ export default {
|
|||
VideoPlayer,
|
||||
ChannelCredit
|
||||
},
|
||||
asyncData ({ params: { slug }, payload: { video, featuredApps, relatedVideos } }) {
|
||||
async asyncData ( data ) {
|
||||
|
||||
// const { appsRelatedToVideo, videosRelatedToVideo } = await import('~/helpers/related.js')
|
||||
// const { default: videoList } = await import('~/static/video-list.json')
|
||||
|
||||
// Find the video for our current page
|
||||
// const video = videoList.find(video => (video.slug === slug))
|
||||
const {
|
||||
params: { slug },
|
||||
route
|
||||
} = data
|
||||
|
||||
// Get featured apps
|
||||
// const featuredApps = appsRelatedToVideo(video)
|
||||
let {
|
||||
payload
|
||||
} = data
|
||||
|
||||
// // Get related videos
|
||||
// const relatedVideos = videosRelatedToVideo(video)
|
||||
|
||||
|
||||
// Manually get payload as fallback
|
||||
// Uncomment for dev
|
||||
// if ( payload === undefined ) {
|
||||
// // Read back the JSON we just wrote to ensure it exists
|
||||
// const { default: savedList } = await import('~/static/nuxt-endpoints.json')
|
||||
|
||||
// const endpoint = savedList.find( resource => {
|
||||
// return resource.route === route.path
|
||||
// } )
|
||||
|
||||
// payload = endpoint.payload
|
||||
// }
|
||||
|
||||
// console.log({
|
||||
// video,
|
||||
|
|
@ -107,9 +158,9 @@ export default {
|
|||
// })
|
||||
|
||||
return {
|
||||
video,
|
||||
featuredApps,
|
||||
relatedVideos
|
||||
video: payload.video,
|
||||
featuredApps: payload.featuredApps,
|
||||
relatedVideos: payload.relatedVideos
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -117,10 +168,11 @@ export default {
|
|||
return `${this.video.name} - Does It ARM`
|
||||
},
|
||||
description () {
|
||||
const featuredAppsString = this.featuredApps.slice(0, 5).map(app => app.name).join(', ')
|
||||
const featuredAppsString = makeFeaturedAppsString( this.featuredApps )
|
||||
|
||||
return `Apple Silicon performance and support videos for ${featuredAppsString}`
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
getAppEndpoint
|
||||
|
|
@ -151,7 +203,10 @@ export default {
|
|||
'property': 'twitter:url',
|
||||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||||
},
|
||||
]
|
||||
],
|
||||
|
||||
__dangerouslyDisableSanitizers: ['script'],
|
||||
script: [{ innerHTML: JSON.stringify( buildVideoStructuredData( this.video, this.featuredApps ) ), type: 'application/ld+json' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue