mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-15 06:35:20 -07:00
325 lines
12 KiB
Vue
325 lines
12 KiB
Vue
<template>
|
||
<section class="container py-24">
|
||
<div class="flex flex-col items-center space-y-24">
|
||
<header class="flex flex-col items-center space-y-6 md:px-12">
|
||
|
||
<div class="title-container relative">
|
||
<h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center">
|
||
Apple Silicon App Test
|
||
</h1>
|
||
<div
|
||
class="beta-pill absolute h-5 text-xs bg-white-2 flex justify-center items-center outline-0 rounded-full ease px-2"
|
||
style="top: -1em; right: 0;"
|
||
>
|
||
Beta
|
||
</div>
|
||
</div>
|
||
|
||
<h2 class="subtitle md:text-xl text-center">
|
||
Check for Apple Silicon compatibility for your apps before you buy an M1 Mac.
|
||
</h2>
|
||
|
||
</header>
|
||
|
||
<div class="app-tester w-full space-y-4 pb-64">
|
||
|
||
<div
|
||
class="relative w-full flex flex-col justify-center items-center space-y-4 pb-8"
|
||
>
|
||
<button
|
||
:class="[
|
||
'rounded-xl text-3xl font-semibold scale-150 bg-darkest neumorphic-shadow focus:outline-none py-4 px-6',
|
||
isLoadingFiles ? 'shimmer' : ''
|
||
]"
|
||
@click="triggerFilepicker"
|
||
>{{ isLoadingFiles ? 'Loading Files' : 'Select Apps' }}</button>
|
||
|
||
<template v-if="isLoadingFiles">
|
||
<div>Loading usually takes about a minute per 500mb</div>
|
||
<button
|
||
class="underline"
|
||
@click="isLoadingFiles = false"
|
||
>Cancel</button>
|
||
</template>
|
||
|
||
<small>Supports: Mac Apps, Zip files, and <em>some</em> DMG files. Bigger files take longer.</small>
|
||
|
||
<input
|
||
ref="file-selector"
|
||
type="file"
|
||
accept="application/**"
|
||
multiple
|
||
hidden
|
||
@change="fileInputChanged"
|
||
>
|
||
<!-- Directories only: webkitdirectory directory -->
|
||
</div>
|
||
|
||
|
||
<div
|
||
v-if="foundFiles.length !== 0"
|
||
class="w-full text-center"
|
||
>
|
||
Total Files: {{ foundFiles.length }}
|
||
</div>
|
||
|
||
<div
|
||
v-if="foundFiles.length !== 0"
|
||
class="app-scans-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark spac-y-3 my-4 px-5"
|
||
>
|
||
|
||
<ul
|
||
class="results-container divide-y divide-gray-700"
|
||
>
|
||
<li
|
||
v-for="( appScan, index ) in foundFiles"
|
||
:key="`${appScan.name}-${index}`"
|
||
:ref="`${appScan.name}-row`"
|
||
class="relative"
|
||
>
|
||
<!-- app.endpoint: {{ app.endpoint }} -->
|
||
<div
|
||
:class="[
|
||
'flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-3 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-5',
|
||
(appScan.status !== 'finished') ? 'shimmer' : ''
|
||
]"
|
||
style="transition-property: border;"
|
||
>
|
||
|
||
<div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker">
|
||
{{ appScan.name.charAt(0) }}
|
||
</div>
|
||
{{ appScan.displayName || appScan.name }}
|
||
{{ appScan.appVersion ? `- v${appScan.appVersion}` : '' }}
|
||
{{ appScan.displayAppSize ? `- App ${appScan.displayAppSize}` : '' }}
|
||
{{ appScan.displayBinarySize ? `- Binary ${appScan.displayBinarySize}` : '' }}
|
||
<div class="text-sm leading-5 font-bold">
|
||
{{ appScan.statusMessage }}
|
||
</div>
|
||
|
||
<!-- appScan.binarySize: {{ appScan.binarySize }} -->
|
||
|
||
<div
|
||
v-if="appScan.binarySize && appScan.binarySize < (10 ^ 6)"
|
||
class="text-sm leading-5 font-bold"
|
||
>
|
||
⚠️ Large Binary - This scan may take a while an/or have issues
|
||
</div>
|
||
|
||
<details class="w-full pt-6">
|
||
<summary class="cursor-pointer mb-3">Details</summary>
|
||
<div>
|
||
<div v-if="appScan.details.length === 0">No details available</div>
|
||
<ul v-else>
|
||
<li
|
||
v-for="( detail ) in appScan.details"
|
||
:key="`${appScan.name}-detail-${detail.label}`"
|
||
><strong>{{ detail.label }}</strong> <span v-html="detail.value" /></li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
</div>
|
||
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="w-full max-w-2xl">
|
||
<details
|
||
v-for="([ question, answer ], index) in faqs"
|
||
:key="`question-${index}`"
|
||
class="w-full"
|
||
>
|
||
<summary class="cursor-pointer">{{ question }}</summary>
|
||
<div class="p-4">
|
||
<p>{{ answer }}</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
|
||
<!-- <pre class="w-full">{{ appsBeingScanned }}</pre> -->
|
||
|
||
<AllUpdatesSubscribe
|
||
:input-class-groups="{
|
||
shadow: 'hover:neumorphic-shadow',
|
||
bg: '',
|
||
focus: 'bg-transparent neumorphic-shadow pl-8',
|
||
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
|
||
}"
|
||
class="my-12"
|
||
/>
|
||
|
||
</div>
|
||
|
||
<!-- <client-only>
|
||
<FullScreenFileDrop @drop="onDrop" />
|
||
</client-only> -->
|
||
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
// import axios from 'axios'
|
||
|
||
// import AppFilesScanner from '~/helpers/app-files-scanner.js'
|
||
|
||
|
||
import LinkButton from '~/components/link-button.vue'
|
||
import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
|
||
|
||
export default {
|
||
// async asyncData () {
|
||
|
||
|
||
// return {
|
||
// allAppSearchLinks,
|
||
// customSummaryNumbers: getListSummaryNumbers(allList)
|
||
// }
|
||
// },
|
||
components: {
|
||
// FullScreenFileDrop: () => process.client ? import('~/components/fullscreen-file-drop.vue') : null,
|
||
LinkButton,
|
||
AllUpdatesSubscribe
|
||
},
|
||
data: function () {
|
||
return {
|
||
query: '',
|
||
isLoadingFiles: false,
|
||
appsBeingScanned: []
|
||
}
|
||
},
|
||
computed: {
|
||
foundFiles () {
|
||
return this.appsBeingScanned.filter( appScan => {
|
||
return !appScan.statusMessage.includes('⏭')
|
||
})
|
||
},
|
||
|
||
faqs () {
|
||
return [
|
||
[
|
||
'Non-native Apps (🔶)',
|
||
`
|
||
You can try getting the latest version from the developer\'s the download page scan that.
|
||
You can also request a manual review to determine the current status of the app on Rosetta 2.
|
||
`
|
||
],
|
||
[
|
||
'Why can\'t it tell me if an app will work on Rosetta 2? ',
|
||
`
|
||
Currently, Rosetta 2 is a proprietary Apple software that is only available on macOS on Apple Silicon devices.
|
||
This means there isn't any way to test Rosetta 2 compatibility with an app without a physical Apple Silicon device and so you definitely can't test that with just a website alone... for now...
|
||
|
||
Feel free to signup for email updates.
|
||
`
|
||
]
|
||
]
|
||
},
|
||
|
||
title () {
|
||
return `Apple Silicon Compatibility`
|
||
},
|
||
description () {
|
||
return `Check for Apple Silicon compatibility for any of your apps instantly before you buy an M1 Mac. `
|
||
}
|
||
},
|
||
mounted () {
|
||
this.scanner = null
|
||
},
|
||
methods: {
|
||
log ( thing ) {
|
||
console.log( thing )
|
||
},
|
||
|
||
triggerFilepicker () {
|
||
this.isLoadingFiles = true
|
||
|
||
// this.watchFileInput()
|
||
|
||
this.$refs['file-selector'].dispatchEvent(new MouseEvent('click'))
|
||
},
|
||
async fileInputChanged () {
|
||
this.isLoadingFiles = false
|
||
// console.log('file-selector', this.$refs['file-selector'])
|
||
|
||
// Get FileList from input
|
||
const fileList = this.$refs['file-selector'].files
|
||
|
||
// If the scanner instance is not set up yet
|
||
// then create and initialize it
|
||
if ( this.scanner === null ) {
|
||
console.log('Initializing scanner instance')
|
||
|
||
// Bring in code
|
||
const { default: AppFilesScanner} = await import('~/helpers/app-files-scanner.js')
|
||
|
||
// Initialize instance
|
||
this.scanner = new AppFilesScanner({
|
||
observableFilesArray: this.appsBeingScanned
|
||
})
|
||
}
|
||
|
||
// console.log('fileInputChanged files', fileList)
|
||
|
||
this.scanner.scan( fileList )
|
||
},
|
||
// async onDrop ( formData, fileList ) {
|
||
// console.log('Off to the races')
|
||
|
||
// // await new Promise(r => setTimeout(r, 2000))
|
||
|
||
// const formValues = formData.values()
|
||
|
||
// for ( const value of formValues ) {
|
||
// console.log( 'value', value )
|
||
// }
|
||
|
||
// // console.log( 'formData', formData.values() ) // Can be posted to server
|
||
// // console.log( 'fileList', fileList ) // Can get access to things like file name and size
|
||
|
||
// this.scanner.scan( fileList )
|
||
// }
|
||
// async onQueryUpdate ( $event ) {
|
||
// // console.log('$event', $event)
|
||
// this.query = $event
|
||
|
||
|
||
// return
|
||
// }
|
||
},
|
||
head() {
|
||
return {
|
||
title: this.title,
|
||
meta: [
|
||
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||
{
|
||
'hid': 'description',
|
||
'name': 'description',
|
||
'content': this.description
|
||
},
|
||
|
||
// Twitter Card
|
||
{
|
||
'hid': 'twitter:title',
|
||
'property': 'twitter:title',
|
||
'content': this.title
|
||
},
|
||
{
|
||
'hid': 'twitter:description',
|
||
'property': 'twitter:description',
|
||
'content': this.description
|
||
},
|
||
{
|
||
'property': 'twitter:url',
|
||
'content': `${process.env.URL}${this.$nuxt.$route.path}`
|
||
},
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|